Antes de entrar en Hooks ...

Antes de entrar en los conceptos básicos de Hooks, es importante comprender cómo llegamos a ellos. Como sabrá, React le permite usar dos estructuras de Javascript para definir componentes: Funciones o Clases .

1️⃣ Clase:

• Componente de clase: una clase de JavaScript que incluye un método de representación que devuelve la interfaz de usuario. También puede configurar el estado en su función de constructor y administrar el estado y realizar efectos secundarios en sus métodos de ciclo de vida.
• Componente puro: difiere de un componente de clase ya que tiene implementado un método shouldComponentUpdate, con una comparación superficial y de estado. Para valores simples, evita re-renderizaciones innecesarias, pero para objetos complejos y profundos, puede producir falsos negativos.
• Componente sin estado : una clase de JavaScript sin gestión de estado.

2️⃣ Función:

• Componente sin estado: función de JavaScript simple a la que se le pasan propiedades y devuelve la interfaz de usuario.
• Componente de función: una función de JavaScript que recibe propiedades, que usa ganchos para administrar el estado, realizar efectos secundarios y devolver la IU.

Antes de React Hooks, no había forma de tener un estado de administración de componentes de función.

Los componentes de función surgieron con la necesidad de tener componentes sin estado con la capacidad de rastrear valores en el componente y al mismo tiempo mantener sincronizados el estado y la interfaz de usuario.

Y ahora… ¡Vamos a meternos en ganchos!

Lo primero es lo primero, un gancho es una función simple. En la siguiente publicación pasaremos por los siguientes ganchos: useState , useEffect , useSelector , useDispatch y useRef ✌️.

useState (Reaccionar)

• Da a React la responsabilidad de gestionar un valor estatal.
• R eturns una matriz de dos elementos: valor de la corriente y una función de actualización.const [value, setValue] = useState(initialValue)
• Para establecer un valor inicial para la variable, pase el valor inicial como argumento a la función useState .
• Para establecer un nuevo valor, use la función de actualización. El nuevo valor reemplaza al anterior ↝ Cuando el valor del estado cambia, React sabe que necesitará una nueva versión de la interfaz de usuario ↝ render.setValue(newValue)
• Se diferencia del componente de clase setState que fusiona el estado con el nuevo, en lugar de recibir un solo valor.
• Para actualizar un valor de estado en función de su valor anterior, en lugar de pasar a la función de actualización un valor para establecer, puede pasar una función. React pasará a esa función el valor de estado actual y usará el valor de retorno de esa función como el nuevo valor de estado. Ejemplo
• Tenga cuidado al tratar con objects. Asegúrese de copiar las propiedades sin cambios del estado anterior cuando su función de actualización esté actualizando solo un subconjunto de las propiedades.setValue(state => { return {...state, property: newValue} })

• Se utiliza para realizar efectos secundarios, como por ejemplo, realizar llamadas a la API o trabajar con tiempos de espera.
• El primer argumento de la función useEffect es el efecto en sí y el segundo es la lista de dependencias.useEffect(() => { Effect goes here }, dependencyList);
• React determina si ejecutar un efecto comprobando si los valores en la lista de dependencias han cambiado desde la última vez que el componente llamó al efecto.
• Cuando se llama a useEffect sin un segundo argumento, React ejecuta el efecto después de cada renderizado.
• Cuando useEffect se usa con una matriz vacía pasada como segundo argumento, React ejecuta el efecto solo una vez, cuando el componente se monta. Al establecer la lista de dependencias en una matriz vacía, la lista nunca cambiará, por lo que el efecto se ejecuta solo una vez (primeros montajes).
• Para limpiar efectos, devuelva una función del efecto. React se ejecutará antes de volver a ejecutar la función de efecto y cuando el componente se desmonte. ¿Por qué necesitamos hacer esto? Para evitar pérdidas de memoria al suscribirse a los oyentes de eventos varias veces.

😉 Recapping Refs ... Refs proporcionan una forma de acceder a los nodos DOM o elementos de React creados en el método de render. Podría ser útil para administrar el enfoque o las animaciones.

• Responsable de crear un objeto ref mutable, cuya currentpropiedad corresponde al valor de referencia del nodo y se puede inicializar con un valor inicial.const refContainer = useRef(initialValue);
• El objeto devuelto persistirá durante toda la vida útil del componente.
• Si pasa un objeto ref al elemento React, por ejemplo <div ref={myRef} />, React establecerá su .currentpropiedad en el nodo DOM correspondiente siempre que ese nodo cambie.
• useRef le dará el mismo objeto de referencia en cada renderizado y no activará ningún renderizado.

Solo si está familiarizado con React-Redux ⚠️

• Responsable de obtener los datos de la tienda Redux en un componente React.
• Es equivalente a MapStateToProps en Class Component.
• Toma dos argumentos: una función que devuelve el estado o parte del estado, llamada selector , y una función que verifica si el estado anterior y el actual son iguales para verificar si se necesita una actualización (opcional).const result = useSelector(selector, equalityFunction?)
• Se llamará al selector con todo el estado de la tienda Redux como único argumento.
• El selector se ejecutará siempre que se procese el componente de función.
• El selector se ejecutará siempre que se envíe una acción.
• La función de comparación de igualdad solo fuerza una nueva renderización si el resultado del selector parece ser diferente al último resultado. Puede usar la función shallowEqual de la biblioteca React-Redux, por ejemplo.

Solo si está familiarizado con React-Redux ⚠️

• Devuelve una referencia a la función de envío de la tienda Redux. const dispatch = useDispatch()
• Puede usarlo para enviar acciones según sea necesario. dispatch({type: ACTION_TYPE_EXAMPLE, payload: dummy})
• Es el equivalente a MapDispatchToProps en Class Component.

• Menos código y mejor organización del código
• Componentes más fácilmente comprobables
• Extracción de características a funciones externas que se pueden reutilizar y compartir.
• Modelo de ciclo de vida más simple, mientras que el código de efectos secundarios de Class Components se divide en varios métodos de ciclo de vida (componentDidMount, componentWillUnmount, componentWillUpdate)
• No es necesario llamar a super () en un constructor de clases
• No es necesario trabajar con esto y vincular controladores, y comenzar a aprovechar el cierre de javascript.

Referencias:

React Hooks en acción

por John Larsen

Blog de desarrollo

https://dev.to/vitaliemaldur/resize-event-listener-using-react-hooks-1k0c