Ejercicios básicos

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

Despliegue

💡 El api [The Breaking Bad API](https://breakingbadapi.com/) la cual se utilizó para realizar algunos ejercicios presenta algunos inconvenientes, revisa o remplaza el api si persisten los problemas.

Hook de estado

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

Permite rastrear el estado de un componente de función

Hook de efecto

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.

Hook de referencia

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 .

💡 En el ejercicio lo utilizamos para acceder a los atributos de inputs de manera ágil

Exportación de barriles

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 './';

Hook efecto de diseño

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.

Hook de memoria

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.