Scribd
Cargar
9 vistas6 páginas

Clase 5 - Componentes II

El documento aborda conceptos clave de React, incluyendo el uso de props y children para la composición de componentes, así como el ciclo de vida de los componentes y el uso de hooks como useState y useEffect. Se explica cómo useEffect permite controlar efectos secundarios provocados por cambios de estado, y la importancia de gestionar adecuadamente las dependencias para evitar problemas. Además, se menciona la necesidad de separar responsabilidades al utilizar múltiples useEffect en un componente.

Cargado por

Moises Gauna
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
9 vistas6 páginas

Clase 5 - Componentes II

El documento aborda conceptos clave de React, incluyendo el uso de props y children para la composición de componentes, así como el ciclo de vida de los componentes y el uso de hooks como useState y useEffect. Se explica cómo useEffect permite controlar efectos secundarios provocados por cambios de estado, y la importancia de gestionar adecuadamente las dependencias para evitar problemas. Además, se menciona la necesidad de separar responsabilidades al utilizar múltiples useEffect en un componente.

Cargado por

Moises Gauna
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 6

Clase 05.

Componentes II
Componentes II: Introducción
Propiedades/Props

Props: ¿Un espacio multipropósito?

No están limitadas a ser valores fijos como: 1 / “Alexis” / true

Pueden ser lo que sea:

✓ Valores comunes:
○ num, bool, array, obj
✓ Funciones
✓ Componentes. Si los componentes son funciones, ¡entonces puedo pasar
componentes!
✓ Children
✓ Valores inyectados por librerías:
○ location, rutas, traducciones

Children
Children es una manera que tiene react de permitirnos proyectar/transcluir uno o más
componentes dentro otro.

Es ideal cuando:

✓ Necesitamos que un elemento quede dentro de otro, sin que sepan el uno del otro.
✓ Necesitamos implementar patrones más complejos.

Relación de Children y props

React inyecta automáticamente children en las props, sólo si encuentra alguno.


En este ejemplo <SuperForm> no tiene children

Si le agregamos children en el JSX...


Los inyecta como objeto si es único o como array si son muchos.

Tener cuidado para evitar errores del tipo children[0] o cuando estoy utilizando un
metodo de array, si espero un grupo de children y viene uno solo.

Profundizaremos esto en el Workshop sobre Hooks, Custom Hooks y Children.

Ciclos de vida
El ciclo de vida no es más que una serie de estados por los cuales pasa todo componente
a lo largo de su existencia.

Las 3 clasificaciones de estado dentro un ciclo de vida:

● El montaje se produce la primera vez que un componente va a generarse,


incluyéndose en el DOM.
● La actualización se produce cuando el componente ya generado se está
actualizando.
● El desmontaje se produce cuando el componente se elimina del DOM.
Otros Hooks

Como vimos anteriormente los hooks son funciones que le dan funcionabilidad adicional a
nuestros componentes funcionales. ¿Cuáles y cuántos son?

✓ Hooks básicos:
○ useState: para crear un estado
○ useEffect: para controlar efectos secundarios.
○ useContext: para usar un contexto

✓ Además también existen:


○ Hooks adicionales (useReducer, useCallback, useMemo, useRef,
useImperativeHandle, useLayoutEffect, useDebugValue, useDeferredValue,
useTransition, useId)
○ Hooks de librería (useSyncExternalStore, useInsertionEffect)

Poco a poco aprenderemos a usar los más importantes…


Ya estuvimos hablando de los estados y de cómo implementarlos con hooks.
Dijimos que el funcionamiento de React está estrechamente ligado al cambio de estados, y
acá es donde hay que detenerse ahora.

Pensemos primero en el proceso. Cuando se produce un cambio de estado React ejecuta


un nuevo proceso de renderizado para ese componente y, de manera recursiva,
para todos sus componentes hijos. Durante este proceso, React ejecuta de nuevo
las funciones de los componentes para generar el nuevo árbol de elementos de la
interfaz de usuario.
En todas estas funciones de componentes cabe la posibilidad de que me encuentre con la
necesidad de ejecutar otras funciones para realizar diferentes tareas dentro del
componente, como por ejemplo una llamada a una api para obtener datos.

Si en cada render provocado por un cambio de estado se ejecuta está llamada a la API
quiere decir que un cambio de estado está provocando efectos secundarios y no controlar
estos puede traernos problemas.

Entonces, ¿Cómo los controlamos?

Con el hook useEffect

useEffect

useEffect va a ser el hook que nos permita controlar efectos secundarios provocados por
cambios de estados. Utilizado normalmente para sincronizar el componente con sistemas
externos.

Este hook recibe dos argumentos.

El primero es una función de callback con acciones a ejecutar y el segundo un array de


dependencias, donde se indicará que estados (pueden venir por props) deben cambiar
para que se vuelva a ejecutar la función del primer argumento.

Para completar este array de dependencias la pregunta que debo hacerme es ¿Con que
estados debo sincronizar este efecto?
useEffect(fn) // Con todos los estados

useEffect(fn, []) // Con ningún estado

useEffect(fn, [esos, estados])

Hay que tener en cuenta que useEffect se ejecuta siempre después del renderizado y por
lo menos una vez al montar el componente.

Ahora analicemos la función del primer argumento. En esta función escribiremos el bloque de
código que deseamos sincronizar en el cuerpo y retornaremos una función, llamada función de
limpieza, que se ejecutará tantas veces como se haya ejecutado la función que la retorna. Es
decir que el proceso es simétrico.
Dado que la función se ejecutará por lo menos una vez al montar el componente la función que
se retorna se ejecutará una vez al desmontar el componente. Ahora bien, en caso de tener
dependencias de estados, la limpieza se ejecutará antes de volver a ejecutar el efecto frente a
un cambio en una de sus dependencias. Por eso siempre se ejecutará la limpieza la misma
cantidad de veces que se haya ejecutado el efecto.

Acción => Limpieza => Acción => Limpieza

*Actualmente el modo estricto de React ejecuta dos veces la función del primer
argumento. Por eso puede ser que veas dos veces un mismo console.log que se ejecutó
dentro de esta función.

Como podemos utilizar todos los useEffect que deseemos, es conveniente separar
responsabilidades. Cada useEffect encargándose de un solo efecto y limpieza.

También podría gustarte