Nos permite usar el estado y otras características de react si usar una clase.

Ejercicios básicos para la introducción a Hooks.

useState, useEffect, useRef, useLayoutEffect, useMemo, memo, useCallback, barrel exports

exercise-hooks/src/01-useState at main · ideacodigo/exercise-hooks (github.com)

Permite rastrear el estado de un componente de función

useEffect

exercise-hooks/src/02-useEffect at main · ideacodigo/exercise-hooks (github.com)

Como lo menciona es.reactjs.org, el hook de estado te permite llevar a cabo efectos secundarios de componentes funcionales.

useHook

exercise-hooks/src/04-useRef at main · ideacodigo/exercise-hooks (github.com)

es.reactjs.org nos menciona, que en su esencia useRef es como una “caja” que puede almacenar en una variable mutable en su propiedad .current .

Un paréntesis en los hooks, en el desarrollo de estos ejercicios utilizamos importaciones de barril, esto nos es de utilidad cuando tenemos varias importaciones, las agrupamos en un archivo index.js y luego llamamos a este archivo cuando necesitemos estas importaciones en ves de llamar puntualmente a todas las importaciones.

Introducir El Concepto De Exportación De Barriles En React (morioh.com)

Un barril nos permite consolidar, o resumir, las exportaciones de múltiples archivos o módulos en un solo módulo. Los barriles agilizan las importaciones, simplifican las exportaciones y nos ayudan a evitar mucho desorden en nuestra base de código.

En resumen, se utiliza de la siguiente manera.

export * from './lib'
export * from './theme';

import React from 'react';
import { UseLib, ComponenteTheme} from './';

useLayoutEffect

exercise-hooks/src/05-useLayoutEffect at main · ideacodigo/exercise-hooks (github.com)

es.reactjs.org nos menciona que su firma es idéntica a useEffect , pero se dispara de forma síncrona después de todas las mutaciones de DOM. Use esto para leer el diseño del DOM y volver a renderizar de forma sincrónica.

Nos permite realizar el seguimiento de propiedades de un objeto, cuando estas cambien podemos actuar según nuestras necesidades de adaptabilidad u otras.

useMemo

exercise-hooks/src/06-memos at main · ideacodigo/exercise-hooks (github.com)

Este nos devuelve un valor memorizado, podemos utilizar este hook para evitar renderizaciones innecesarias. en es.reactjs.org podemos observar algunas recomendaciones de uso.