Hooks (useState, useEffect, useContext e outros) são recursos do React para gerenciar estado e efeitos colaterais em componentes funcionais — e funcionam da mesma forma no React Native. Entender os hooks principais é essencial para construir componentes React Native.
const [count, setCount] = useState(0); // state + setter; setting it re-renders
const [user, setUser] = ();
// useEffect runs side effects (data fetching, subscriptions) after render
useEffect(() => {
fetchData(); // runs after render
// optional CLEANUP (returned function) — runs on unmount / before re-running
const sub = subscribe();
return () => sub.unsubscribe(); // CLEAN UP (prevent leaks)
}, [dependency]); // dependency array → when to re-run
// → [] = run once on mount; [dep] = run when dep changes; none = every render
useEffect lida com efeitos colaterais (busca de dados, inscrições, temporizadores) com um array de dependência controlando quando é executado, e uma função de limpeza opcional (importante para prevenir vazamentos).
useContext → consume context (shared data without prop drilling)
useRef → a mutable reference that persists across renders (e.g. reference a component,
store a value without re-rendering)
useMemo → memoize an expensive computed value (performance)
useCallback → memoize a function (avoid unnecessary re-creation/re-renders)
useReducer → manage complex state with a reducer
CUSTOM HOOKS → extract reusable stateful logic (e.g. useFetch, useAuth)
⚠️ Only call hooks at the TOP LEVEL of a component (not in conditions/loops/nested functions)
⚠️ Only call hooks from React components or custom hooks
→ These rules ensure hooks work correctly (React relies on call order).
Entender React hooks é essencial para React Native porque hooks são a forma padrão de gerenciar estado e efeitos colaterais em componentes funcionais, que é como os aplicativos modernos React Native são construídos, portanto é conhecimento obrigatório.
Hooks funcionam de forma idêntica no React Native e no React para web, tornando este conhecimento diretamente transferível. useState (gerenciando estado, acionando re-renderizações) é fundamental para qualquer componente com dados em mudança. useEffect é particularmente importante: ele lida com efeitos colaterais (busca de dados, inscrições, temporizadores) com um array de dependência controlando quando é executado e uma função de limpeza opcional (crucial para prevenir vazamentos ao cancelar inscrições/limpar) — entender useEffect, seu array de dependência e a limpeza é essencial, pois efeitos colaterais (como buscar dados quando uma tela carrega) são comuns e erros com useEffect causam bugs (loops infinitos de dependências erradas, vazamentos de limpeza ausente).
Entender outros hooks principais — useContext (consumindo dados compartilhados sem prop drilling), useRef (referências mutáveis persistentes), useMemo/useCallback (memoização para performance), useReducer (estado complexo) e custom hooks (extraindo lógica com estado reutilizável como useFetch ou useAuth — um padrão poderoso para reutilização de código) — cobre o arsenal para construir componentes reais.
Entender as regras dos hooks (chamá-los apenas no nível superior e apenas de componentes/custom hooks, pois React depende da ordem de chamada) é essencial para evitar bugs sutis.
Como hooks são o mecanismo padrão para estado e efeitos colaterais em componentes funcionais modernos React Native (e o conhecimento é transferível diretamente do React), e como entender os hooks principais (especialmente useState e useEffect com sua limpeza) e as regras é essencial para construir componentes corretos, entender React hooks é conhecimento React Native essencial e frequentemente aplicado — fundamental para construir componentes React Native modernos, central para gerenciar estado e efeitos colaterais, e diretamente transferível do React para web, uma habilidade central para desenvolvimento React Native.