React Hooks e Gerenciamento de Estado
O que são React Hooks e por que foram introduzidos?
Resposta:
React Hooks são funções que permitem "conectar-se" aos recursos de estado e ciclo de vida do React a partir de componentes funcionais. Eles foram introduzidos para permitir que os desenvolvedores usem estado e outros recursos do React sem escrever componentes de classe, promovendo melhor reutilização de código, legibilidade e resolvendo problemas como 'wrapper hell' (inferno de wrappers) e métodos de ciclo de vida complexos.
Explique o propósito do Hook useState.
Resposta:
O Hook useState permite que componentes funcionais gerenciem estado. Ele retorna um valor com estado e uma função para atualizá-lo. Quando a função de atualização (setter) é chamada, o React re-renderiza o componente com o novo valor de estado.
Como o Hook useEffect funciona e quais são seus casos de uso comuns?
Resposta:
O Hook useEffect permite que você execute efeitos colaterais em componentes funcionais, como busca de dados, assinaturas (subscriptions) ou modificação manual do DOM. Ele é executado após cada renderização por padrão, mas sua execução pode ser controlada especificando um array de dependências. Casos de uso comuns incluem buscar dados na montagem do componente, configurar ouvintes de eventos (event listeners) e limpar recursos.
Qual a importância do array de dependências em useEffect?
Resposta:
O array de dependências em useEffect controla quando o efeito é reexecutado. Se o array estiver vazio ([]), o efeito é executado apenas uma vez após a renderização inicial. Se omitido, ele é executado após cada renderização. Se contiver valores, o efeito é reexecutado apenas quando um desses valores muda, prevenindo reexecuções desnecessárias e potenciais loops infinitos.
Quando você usaria useContext?
Resposta:
useContext é usado para consumir valores de um Contexto do React. Ele permite que você evite o 'prop drilling' (passagem de props através de muitos níveis) fornecendo uma maneira de passar dados profundamente pela árvore de componentes sem passar manualmente props em cada nível. É ideal para estado global como temas, autenticação de usuário ou idioma (locale).
Explique a diferença entre useState e useReducer.
Resposta:
useState é para gerenciamento de estado simples, tipicamente para valores primitivos ou pequenos objetos. useReducer é uma alternativa ao useState para lógica de estado mais complexa, especialmente quando as transições de estado envolvem múltiplos sub-valores ou o próximo estado depende do anterior. É frequentemente preferido para gerenciar o estado em toda a aplicação ou quando as atualizações de estado são complexas e envolvem uma função 'reducer'.
O que é useCallback e quando você deve usá-lo?
Resposta:
useCallback é um Hook que retorna uma função de callback memorizada (memoized). Ele é usado para evitar re-renderizações desnecessárias de componentes filhos que dependem de props de callback, especialmente quando esses callbacks são passados de um componente pai. É benéfico ao passar callbacks para componentes filhos otimizados (por exemplo, React.memo) para manter a igualdade referencial.
O que é useMemo e como ele difere de useCallback?
Resposta:
useMemo é um Hook que retorna um valor memorizado (memoized). Ele é usado para otimizar o desempenho, evitando que cálculos caros sejam reexecutados a cada renderização se suas dependências não mudaram. Enquanto useCallback memoriza uma função, useMemo memoriza o resultado de uma chamada de função (um valor).
Descreva as 'Regras dos Hooks'.
Resposta:
Existem duas regras principais: 1) Chame Hooks apenas no nível superior dos seus componentes de função React ou Hooks customizados. Não os chame dentro de loops, condições ou funções aninhadas. 2) Chame Hooks apenas de componentes de função React ou Hooks customizados. Não os chame de funções JavaScript regulares. Essas regras garantem que os Hooks sejam chamados na mesma ordem em cada renderização.
Como funcionam os Hooks customizados e quais são seus benefícios?
Resposta:
Hooks customizados são funções JavaScript cujos nomes começam com use e que podem chamar outros Hooks. Eles permitem que você extraia lógica com estado reutilizável de componentes, tornando mais fácil compartilhar lógica entre diferentes componentes sem prop drilling ou render props. Os benefícios incluem melhor organização de código, reutilização e testabilidade.
Quando você escolheria uma biblioteca de gerenciamento de estado global (por exemplo, Redux, Zustand) em vez dos Hooks integrados do React como useState e useContext?
Resposta:
Para aplicações pequenas a médias, useState e useContext geralmente são suficientes. No entanto, para aplicações de grande escala com interações de estado complexas, atualizações frequentes ou a necessidade de ferramentas de depuração centralizadas (como Redux DevTools), uma biblioteca dedicada de gerenciamento de estado global oferece melhor escalabilidade, previsibilidade e manutenibilidade. Elas oferecem recursos como middleware, imposição de imutabilidade e uma única fonte de verdade.
Qual o propósito de useRef?
Resposta:
useRef retorna um objeto ref mutável cuja propriedade .current é inicializada com o argumento passado. O objeto retornado persistirá durante toda a vida útil do componente. É comumente usado para acessar e interagir diretamente com elementos DOM, ou para armazenar qualquer valor mutável que não cause uma re-renderização quando atualizado, como um ID de timer.
