Resúmen de React Hooks con Typescript

Los Hooks son una característica en React que te permite usar el estado y otras funciones de React sin clases de escritura. Aquí te proporcionamos ejemplos de código fáciles de entender para ayudarlo a aprender su funcionamiento y que puedas aprovecharlos en su próximo proyecto.

useState

El useState es un hook que nos permite crear un estado en un componente. El argumento que recibe es un valor inicial. En este caso, el valor inicial es 0. El valor que se retorna es un array con dos elementos: el valor del estado y una función que permite actualizar el valor del estado. Cada vez que se el estado se actualiza, React hará una renderización.

⚠️ La función de actualización es asíncrona, por ello si se usa el valor consecutivamente se puede tener respuestas no deseadas.

import React, { useState } from 'react';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  return <button onClick={() => setCounter((prev) => prev + 1)}>{counter}</button>;
};

useEffect

El useEffect es un hook que nos permite ejecutar un efecto secundarios en un componente cuando alguna dependencia cambia. Este hook recibe dos parámetros una función que se ejecuta cuando el componente se monta y un arreglo de dependencias.Cuando uno de sus dependencias cambia, se ejecuta la función.

• 🎯Si no se pasa ninguna dependencia, el useEffect se ejecuta cada vez que el componente se vuelve a renderizar.
• 🎯Si no se pasa ninguna dependencia, el useEffect se ejecuta cada vez que el componente se vuelve a renderizar.
• 🎯El retorno del useEffect es una función que se ejecuta cuando el componente se desmonta. Es una fase de limpieza. se debe remover eventos, desuscribirse de observadores, etc.
• ⚠️Se debe usar un useEffect para cada tarea específica.
• ❗No se puede usar de manera condicional.

import React, { useEffect, useState } from 'react';

export const Counter = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    console.log('Counter updated');
    return () => console.log('Counter unmounted');
  }, [counter]);

  return <button onClick={() => setCounter((v) => v + 1)}>{counter}</button>;
};

useRef

El useRef es un hook que nos permite mantener una referencia a un elemento del DOM. Esto nos permite acceder a un elemento del DOM desde una función.

👉Cuando su valor cambia, el componente no se renderiza nuevamente.

import React, { useEffect } from 'react';

export const Component = () => {
  const inputRef = React.useRef<HTMLInputElement>(null);

  useEffect(() => {
    inputRef.current?.focus(); // <-- No renderiza nuevamente el componente
  }, []);

  return <input ref={inputRef} />;
};

useLayoutEffect

El useLayoutEffect es un hook que se ejecuta de manera síncrona después de todas las mutaciones del DOM pero antes de que el cambio se pinte en pantalla.

👉 La diferencia clave entre useEffect y useLayoutEffect es que useEffect se ejecuta de manera asíncrona y useLayoutEffect de manera síncrona después del render de react. por lo tanto useEffect se ejecutará después de que el cambio se haya pintado en pantalla, mientras que useLayoutEffect se ejecutará antes de que el cambio se haya pintado en pantalla.