Explorando os Hooks do React e as Inovações do React 19

Os hooks revolucionaram o desenvolvimento React ao permitir que componentes funcionais gerenciem estado, efeitos colaterais e lógica complexa de forma elegante. Com o React 19, novos hooks foram introduzidos para otimizar ainda mais o fluxo de trabalho. Neste artigo, exploraremos hooks clássicos, avançados e as novidades da versão 19 com exemplos práticos.

Hooks Básicos do React

useState: Gerenciamento Simples de Estado

Gerencia estados locais em componentes funcionais. Ideal para valores que mudam ao longo do tempo.

Exemplo: Contador Interativo

import { useState } from 'react';

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

return (

useEffect: Efeitos Colaterais

Executa código após renderização, como chamadas de API ou manipulação do DOM.

Exemplo: Buscando Dados de uma API

import { useState, useEffect } from 'react';

function UserList() { const [users, setUsers] = useState([]);

useEffect(() => { fetch('https://api.example.com/users') .then(response => response.json()) .then(data => setUsers(data)); }, []); // Executa apenas uma vez

return (

{users.map(user => (
• {user.name}
))}

useContext: Compartilhamento de Estado Global

Acessa valores de contexto sem prop drilling.

Exemplo: Tema Escuro/Claro

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

const ThemeContext = createContext();

function App() { const [theme, setTheme] = useState('light');

return ( <ThemeContext.Provider value=> </ThemeContext.Provider> ); }

function Toolbar() { const { theme, setTheme } = useContext(ThemeContext);

return ( <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}> Alternar para tema {theme === 'light' ? 'escuro' : 'claro'} ); }

useRef: Referências Mutáveis

Armazena valores que persistem entre renderizações sem causar re-render.

Exemplo: Foco em Input

import { useRef } from 'react';

function TextInput() { const inputRef = useRef(null);

const focusInput = () => { inputRef.current.focus(); };

return (

Hooks Avançados e Customizados

useReducer: Estado Complexo

Gerencia estados com lógica mais elaborada, similar ao Redux.

Exemplo: Lista de Tarefas

import { useReducer } from 'react';

function todosReducer(state, action) { switch (action.type) { case 'ADD_TODO': return [...state, { text: action.text, completed: false }]; case 'TOGGLE_TODO': return state.map((todo, index) => index === action.index ? { ...todo, completed: !todo.completed } : todo ); default: return state; } }

function TodoApp() { const [todos, dispatch] = useReducer(todosReducer, []);

const handleSubmit = (e) => { e.preventDefault(); dispatch({ type: 'ADD_TODO', text: e.target.elements.todo.value }); e.target.reset(); };

return (

useMemo e useCallback: Otimização de Performance

• useMemo: Memoriza valores calculados.
• useCallback: Memoriza funções.

Exemplo: Cálculo Pesado

import { useMemo, useState } from 'react';

function ExpensiveComponent({ list }) { const sortedList = useMemo(() => { console.log('Ordenando lista...'); return [...list].sort(); }, [list]);

return

Custom Hooks: Reutilização de Lógica

Exemplo: useFetch para Requisições HTTP

import { useState, useEffect } from 'react';

function useFetch(url) { const [data, setData] = useState(null); const [loading, setLoading] = useState(true);

useEffect(() => { fetch(url) .then(res => res.json()) .then(data => { setData(data); setLoading(false); }); }, [url]);

return { data, loading }; }

// Uso no componente: function UserProfile({ userId }) { const { data: user, loading } = useFetch(https://api.example.com/users/${userId});

if (loading) return

Novos Hooks do React 19

useOptimistic: Atualizações Otimistas

Atualiza a UI antes da confirmação do servidor, revertendo em caso de falha.

Exemplo: Adição Otimista de Comentário

import { useOptimistic } from 'react';

function CommentForm({ onSubmit }) { const [optimisticComments, addOptimisticComment] = useOptimistic( [], (state, newComment) => [...state, { text: newComment, sending: true }] );

const handleSubmit = async (e) => { e.preventDefault(); const formData = new FormData(e.target); const comment = formData.get('comment');

addOptimisticComment(comment);

try {
  await onSubmit(comment);
} catch (error) {
  // Reverte a UI se a requisição falhar
}

};

return (

useResource: Integração com Suspense

Gerencia dados assíncronos de forma declarativa.

Exemplo: Carregamento de Dados com Fallback

import { useResource, Suspense } from 'react';

function fetchUser(id) { // Retorna uma promise }

function UserProfile({ userId }) { const userResource = useResource(() => fetchUser(userId));

return

// Uso no componente pai: <Suspense fallback={