React Hooks: Una Guía Completa

Los Hooks revolucionaron la forma en que escribimos componentes en React. Nos permiten usar estado y otras características de React sin escribir clases.

¿Por qué Hooks?

Antes de Hooks, los componentes funcionales eran "tontos" - no podían tener estado ni efectos secundarios. Los Hooks cambiaron esto completamente.

Principales Hooks

useState

El hook más básico para manejar estado local:

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

useEffect

Para efectos secundarios como llamadas a APIs:

useEffect(() => {
  fetchData();
}, [dependency]);

useContext

Para consumir contexto sin componentes anidados:

const theme = useContext(ThemeContext);

Custom Hooks

Puedes crear tus propios hooks para reutilizar lógica:

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

Reglas de los Hooks

Solo llama Hooks en el nivel superior
Solo llama Hooks desde funciones de React
Los nombres de custom hooks deben empezar con "use"

Conclusión

Los Hooks han simplificado enormemente el desarrollo en React. Aprovéchalos para crear componentes más limpios y mantenibles.