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 tú 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, tu componente app de alto nivel puede pasar el actual tema UI a todos los componentes dentro, no importa la profundidad dentro del componente.

• useContext lee y 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 renderización como un nodo del DOM o un timeout ID. A diferencia con el estado, actualizando un ref no vuelve a renderizar tu componente. Las refs son una “escotilla de escape” del paradigma de React. Son útiles cuando tú necesitas trabajar con sistemas no-React, semejantes como el navegador incorporado de APIs.

• useRef declara una ref. Puede contener cualquier valor, pero la mayoría de las veces se utiliza para contener un nodo DOM.
• useImperativeHandle permite personalizar la ref expuesta por su 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 de trabajo, navegación DOM, animaciones, widgets escritos utilizando una libreria UI diferente y otro código no 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 “escotilla 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 raras variaciones de usos de useEffect con tiempos de diferencias:

• useLayoutEffect dispara antes de que el navegador vuelva a pintar la pantalla. Puede medir el diseño de aquí.
• useInsertionEffect dispara antes de que React haga cambios en el DOM. Las librerías pueden insertar CSS dinámico aquí.

Hooks de rendimiento

Una forma común de optimizar el rendimiento de la doble renderización es saltar el trabajo innecesario. Por ejemplo, tú puedes decirle a React para reusar un cálculo en el cache o saltar el re-renderizado si la data no tiene cambios desde el renderizado anterior.

Para saltar calculos y renderizaciones innecesarias, usa uno de estos hooks:

• useMemo permite guardar en cache los resultados de un cálculo costoso.
• useCallback permite guardar en cache 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 saltar el doble renderizado porque la pantalla actualmente necesita una actualización. En ese caso, tú puedes mejorar el rendimiento separando las actualizaciones de bloqueo que deben ser síncronas (como al escribir dentro de una entrada) de actualizaciones no bloqueadas, las cuáles 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 le 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 librerías y no son comúnmente usadas en el código de la aplicación.

• useDebugValue permite personalizar la etiqueta que la herramienta de desarrollador de React muestra para tu hook personalizado.
• useId permite que un componente asocie un ID único consigo mismo. Normalmente, se utiliza con las API de accesibilidad.
• useSyncExternalStore permite que un componente se subscriba a una tienda externa.

Tus propios hooks

Tú también puedes definir tus propios hooks personalizados como funciones JavaScript.