React Hooks Que Todo Dev Precisa Dominar em 2025

Hooks Mudaram o React

Desde 2019, hooks sao a base do React. Mas muitos devs ficam presos no useState e useEffect. Vamos alem.

useCallback e useMemo

Evitam re-renders desnecessarios:

// useCallback: memoriza a funcao
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

// useMemo: memoriza o resultado
const filteredItems = useMemo(() =>
  items.filter(item => item.isActive),
  [items]
);

Quando usar: quando passa funcoes/objetos como props para componentes memorizados, ou calculos pesados.

useRef (Alem de DOM)

// Guardar valor entre renders sem causar re-render
const renderCount = useRef(0);
useEffect(() => { renderCount.current++; });

// Timer que persiste
const intervalRef = useRef<NodeJS.Timeout>();
useEffect(() => {
  intervalRef.current = setInterval(tick, 1000);
  return () => clearInterval(intervalRef.current);
}, []);

useReducer Para Estado Complexo

type Action =
  | { type: 'ADD_ITEM'; payload: Item }
  | { type: 'REMOVE_ITEM'; id: string }
  | { type: 'TOGGLE_ITEM'; id: string };

function reducer(state: Item[], action: Action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter(i => i.id !== action.id);
    case 'TOGGLE_ITEM':
      return state.map(i =>
        i.id === action.id ? { ...i, done: !i.done } : i
      );
  }
}
const [items, dispatch] = useReducer(reducer, []);

Custom Hooks Uteis

useDebounce

function useDebounce<T>(value: T, delay: number) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);
  return debounced;
}

useLocalStorage

function useLocalStorage<T>(key: string, initial: T) {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });
  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);
  return [value, setValue] as const;
}

React 19: use() Hook

// Novo em React 19: use() para promises
function UserProfile({ userPromise }) {
  const user = use(userPromise);
  return <h1>{user.name}</h1>;
}

Conclusao

Dominar hooks avancados e custom hooks e o que separa quem usa React de quem entende React. Pratique criando seus proprios hooks para logicas que se repetem nos seus projetos.