Hooks integrados de React

Hooks de estado

El estado permite que un componente «recuerde» información como la entrada de un usuario. Por ejemplo, un componente de formulario puede utilizar un estado para guardar la entrada del valor mientras que un componente de galería de imágenes puede utilizar un estado para guardar el índice de la imagen seleccionada.

Para añadir un estado a un componente, usa uno de estos Hooks:

• useState declara una variable de estado que puedes actualizar directamente.
• useReducer declara una variable de estado con la lógica de actualización dentro de una función reductora.

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

Hooks de contexto

El contexto permite a un componente recibir información de padres lejanos sin pasarlas como props. Por ejemplo, el componente en el nivel superior de tu aplicación puede pasar el actual tema de la UI a todos los componentes dentro, sin importar la profundidad dentro del componente.

• useContext lee y se subscribe a un contexto.

function Button() {
  const theme = useContext(ThemeContext);
  // ...

Hooks de refs

Las refs le permiten a un componente mantener alguna información que no es utilizada para el renderizado como un nodo del DOM o el ID de un timeout. A diferencia del estado, actualizar una ref no vuelve a renderizar tu componente. Las refs son una «puerta de escape» del paradigma de React. Son útiles cuando necesitas trabajar con sistemas distintos de React, como las APIs integradas del navegador.

• useRef declara una ref. Puede contener cualquier valor, pero la mayoría de las veces se utiliza para contener un nodo del DOM.
• useImperativeHandle permite personalizar la ref expuesta por tu componente. Esto rara vez se usa.

function Form() {
  const inputRef = useRef(null);
  // ...

Hooks de Efecto

El Hook de Efecto permite a un componente conectarse y sincronizarse con sistemas externos. Esto incluye lidiar con la red, el DOM del navegador, animaciones, widgets escritos utilizando una biblioteca de UI diferente y otro código que no es de React.

• useEffect conecta un componente a un sistema externo.

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

Los Hooks de Efecto son una «puerta de escape» del paradigma de React. No utilices los Efectos para guiar el flujo de los datos de tu aplicación. Si no estás interactuando con un sistema externo, puede que no necesites un Hook de Efecto.

Hay dos variaciones poco usadas de useEffect con diferencias en los tiempos en que se llaman:

• useLayoutEffect se activa antes de que el navegador vuelva a pintar la pantalla. Aquí puedes hacer cálculos de maquetación (layout).
• useInsertionEffect se activa antes de que React haga cambios en el DOM. Aquí las bibliotecas pueden insertar CSS dinámico.

Hooks de rendimiento

Una forma común de optimizar el rendimiento del rerenderizado es evitar trabajo innecesario. Por ejemplo, puedes decirle a React que reutilice un cálculo guardado en caché o que se salte un rerenderizado si los datos no han cambiado desde el renderizado anterior.

Para evitar cálculos y renderizados innecesarios, usa uno de estos Hooks:

• useMemo permite guardar en caché los resultados de un cálculo costoso.
• useCallback permite guardar en caché una función definida antes de pasarla a un componente optimizado.

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

Algunas veces no podrás evitar un rerenderizado porque la pantalla realmente necesita una actualización. En ese caso, puedes mejorar el rendimiento separando las actualizaciones bloqueantes que deben ser síncronas (como al escribir dentro de una entrada de texto) de las actualizaciones no bloqueantes, que no necesitan bloquear la interfaz de usuario (como actualizar un gráfico).

Para priorizar el renderizado, usa uno de estos Hooks:

• useTransition permite marcar una transición de estado como no bloqueante y permitir que otras actualizaciones la interrumpan.
• useDeferredValue te permite aplazar la actualización de una parte no crítica de la interfaz de usuario y dejar que otras partes se actualicen primero.

Otros Hooks

Estos Hooks son mayormente útiles para autores de bibliotecas y no son comúnmente usadas en el código de la aplicación.

• useDebugValue permite personalizar la etiqueta que las Herramientas de Desarrollo de React muestran para tu Hook personalizado.
• useId permite que un componente se asocie un ID único. Normalmente, se utiliza con las APIs de accesibilidad.
• useSyncExternalStore permite que un componente se subscriba a un almacenamiento (store) externo.

Tus propios Hooks

También puedes definir tus propios Hooks personalizados como funciones JavaScript.