React

React Hooks
Sesión 7

Esta foto de Autor Esta foto de Autor Esta foto de Autor desconocido está Esta foto de Autor desconocido está bajo
desconocido está bajo desconocido está bajo bajo licencia CC BY-SA-NC licencia CC BY
licencia CC BY licencia CC BY-SA-NC
 00 Objetivo de la sesión

❑ useRef
❑ useEffect
❑ Fetching Data
❑ React Router

Esta foto de Autor desconocido está bajo licencia CC BY-SA-NC

01

useRef
 01 useRef

Cuando quieres que tu componente “recuerde” alguna

información, pero no quieres que esa información lance un nuevo
render, puedes usar una referencia (ref).

El hook ‘useRef’ nos permite guardar una referencia a un

elemento del DOM o un elemento React.
 01 useRef

Puedes añadir una referencia a tu componente importando el

hook useRef desde React.

Llama a useRef dentro de tu componente y pasale el valor inicial

que quieres referenciar como argumento. Por ejemplo:
 01 useRef

Use ref retorna un objeto así:

 01 useRef

Puedes acceder a la referencia utilizando ref.current. Aquí

tenemos un ejemplo de un botón que aumenta el valor de la
referencia en 1 cada vez que se hace click.
 01 useRef

La referencia (ref) en este caso apunta a un número pero, igual que

en un state, podría apuntar a cualquier referencia: un string, un
objeto, o incluso una función pero, a diferencia del state, ref es un
objeto Javascript con la propiedad current que se puede leer y
modificar directamente.
Los refs también son mantenidos por React en cada re-render.
Pero cambiar un ref no causa que un componente se vuelva a
renderizar.
 02

useEffect
 02 useEffect

Algunos componentes necesitan sincronizarse con sistemas

externos. Por ejemplo: conectarte a un servidor, enviar analíticas o
pedir datos a una API. Effects permite que ejecutes código
después del render para que puedas sincronizar tu componente
con sistemas fuera de React.
 02 useEffect

¿Cómo escribir un Effect?

Para escribir un Effect hay que seguir los siguientes pasos:

1. Declarar el Effect. Por default este se ejecutará después de cada

render.
2. Especifica las dependencias del Effect. Algunos eventos solo se
necesitan correr bajo ciertas condiciones y no en cada render.
3. Algunos efectos necesitan que se especifique cómo detener o
deshacer su Effect. Por ejemplo: “conectarse” necesita una
“desconexión”, “suscribirse” necesita “cancelar la suscripción”.
 02 useEffect

1. Declarar el Effect

Para declarar el Effect solo necesitamos importar el hook desde

React y usar la sintaxis:
 02 useEffect

2. Especifica las dependencias del Effect

useEffect acepta un segundo parámetro que nos permitirá decirle
cuando queremos que se ejecute el código:

Solo en el primer render:

 02 useEffect

En cada render:

La primera vez que se renderice el componente y cuando

cambie el valor de sus dependencias:
 02 useEffect

3. Cleanup

Imagina que estás escribiendo un componente Chat que necesita conectarse

a un servidor de chat cuando aparece. Te dan la createConnection() API que
te retorna un objeto con los métodos connect() y disconnect(). ¿Cómo lo
mantienes conectado mientras el usuario lo está viendo?
 02 useEffect

Hagamos que se conecte cuando nuestro componente se monte,

cuando aparezca en pantalla por primera vez:

¿Qué sucede con esto?

 02 useEffect

Notamos que nuestro componente a pesar de estar conectado se

vuelve a conectar mientras el usuario navega. Nuestro chat es parte de
un componente más extenso y por lo tanto cuando el usuario navega y
el componente chat se monta en la nueva página llama a la function
connection.connect() y vuelve a crear una conexión.
 02 useEffect

Para evitarlo debemos crear una

cleanup function que se ejecute en
el return de nuestro useEffect y,
que por lo tanto, se ejecutará cada
vez antes de que el Effect se
vuelva a correr y cuando el
componente se desmonte.
03

Fetching Data
 03 Fetching Data

Hemos comentado en la
Sección anterior como
useEffect es el mejor lugar
para colocar una función que
nos permita conectarnos a
un servidor externo. En este
caso lo haremos para
obtener data.
 03 Reducer y Context

OJO: La función callback de useEffect debe devolver ‘nada’ o una

‘cleanup function’ por ello no podemos utilizar lo siguiente:
04

React Router
 04 React Router

Instalación:
 04 React Router

‘react-router-dom’ es la librería que permite manejar la navegación

de nuestras aplicaciones Web hechas con React.

Sus componente principales son:

● BrowserRouter
● Routes
● Route
 04 React Router

Route se encarga de comparar si el

pathname actual hace match con la
propiedad path. Si se hace match,
renderiza el elemento en la pantalla.

Route solo funciona si está dentro de

Routes.
 04 React Router

OJO: Por default Router renderiza todas las rutas que hacen
match exactamente o parcialmente con la url. Si deseamos que en
componente Home solo se renderice cuando se escribe
exactamente “/” debemos agregar la propiedad exact.

‘react-router-dom’ tiene otros componentes y features que pueden

ser utilizados dependiendo de la necesidad del proyecto:

https://reactrouter.com/en/main/start/overview
Laboratorio 7

Esta foto de Autor desconocido está bajo licencia CC BY-NC

 Ponte en acción

Recuerda, las ideas principales de la sesión de hoy:

1. El hook ‘useRef’ nos permite guardar una referencia a un elemento del

DOM o un elemento React.
2. Los refs también son mantenidos por React en cada re-render. Pero
cambiar un ref no causa que un componente se vuelva a renderizar.
3. Algunos componentes necesitan sincronizarse con sistemas externos.
Por ejemplo: conectarte a un servidor, enviar analíticas o pedir datos a
una API. Effects permite que ejecutes código después del render para
que puedas sincronizar tu componente con sistemas fuera de React.
Imagen 11: Idea. Recuperado de
4. ‘react-router-dom’ es la librería que permite manejar la navegación de https://pixabay.com/es/photos/bombilla-de-luz-idea-creatividad-
3104355/
nuestras aplicaciones Web hechas con React.
Sus componente principales son:
• BrowserRouter
• Routes
• Route
 Bibliografía

• React Docs BETA. Recuperado de https://beta.reactjs.org/

• Presentando JSX, React. Recuperado de https://es.reactjs.org/docs/introducing-jsx.html
• CDN Links, React. Recuperado de https://reactjs.org/docs/cdn-links.html
• Create React App. Recuperado de https://create-react-app.dev/
• React Router Dom. Recuperado de https://reactrouter.com/en/main/start/overview
• Emotion. Recuperado de https://emotion.sh/
• @babel/standalone. Recuperado de https://babeljs.io/docs/en/babel-standalone
¡Gracias!