Custom Hooks: reaproveitando lógica

Quando dois componentes repetem a mesma lógica de estado e Effects, extraia essa lógica para uma função cujo nome começa com use. Isso cria um Custom Hook que compartilha lógica, não uma instância de estado.

import { useEffect, useState } from 'react';

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];
}

export default function ThemePreference() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');

  return (
    <label>
      Tema
      <select value={theme} onChange={(event) => setTheme(event.target.value)}>
        <option value="light">Claro</option>
        <option value="dark">Escuro</option>
      </select>
    </label>
  );
}

O componente não precisa saber como localStorage é lido ou escrito. Ainda assim, cada componente que chama useLocalStorage recebe seu próprio estado.

• Custom Hook: extrai lógica baseada em Hooks.
• Nome começa com use: para que regras e ferramentas do React reconheçam o Hook.
• Estado não é compartilhado automaticamente: só porque a lógica foi reaproveitada.

Dica: não extraia um Hook apenas para esconder três linhas. Faça isso quando o nome do Hook cria uma abstração útil para o domínio ou elimina repetição real.

No próximo nó, vamos compartilhar dados entre partes distantes da árvore usando Context.