Los hooks son una de las características más poderosas de React. Además de los hooks básicos como useState y useEffect, React proporciona una variedad de hooks avanzados que permiten manejar aspectos más complejos del estado y la lógica de los componentes.

useEffect: Controlando Efectos Secundarios

El hook useEffect se utiliza para manejar efectos secundarios como:

• Llamadas a APIs.
• Subscripciones a eventos.
• Actualizaciones del DOM.

Ejemplo básico

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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    // Cleanup
    return () => clearInterval(timer);
  }, []);

  return <p>Tiempo: {count}s</p>;
}

• El array vacío [] asegura que el efecto solo se ejecute una vez al montar el componente.
• El retorno dentro de useEffect permite limpiar efectos secundarios al desmontar el componente.

useContext: Compartiendo Estado Global

El hook useContext se utiliza para acceder al contexto en React sin necesidad de pasar props manualmente por cada nivel del árbol de componentes.

Ejemplo básico

import React, { useContext, createContext } from 'react';

const UserContext = createContext();

function DisplayUser() {
  const user = useContext(UserContext);
  return <p>Usuario: {user}</p>;
}

function App() {
  return (
    <UserContext.Provider value="Juan">
      <DisplayUser />
    </UserContext.Provider>
  );
}

• createContext define el contexto.
• UserContext.Provider permite pasar un valor a los componentes hijos.
• useContext accede al valor sin pasar props explícitas.