Questão de Programação — Programação de front end — FCC 2026
Programação›Programação de front end
Código
gp003731
Banca
FCC
Órgão
MPE-AL
Ano
2026
Cargo
Analista do Ministério Público - Especialidade: Desenvolvimento de Sistemas
Um portal interno de um Ministério Público Estadual foi desenvolvido em React para análise de relatórios estatísticos, no qual componentes filhos memorizados com React.memo recebem funções anônimas como props em renderizações frequentes, ocasionando re-renderizações desnecessárias devido à mudança de referência das funções, mesmo quando os dados não se alteram. Nesse cenário, a técnica que mitiga o problema e estabiliza a referência das funções sem comprometer a consistência de estado é
Aenvolver as funções passadas como props com useCallback, definindo corretamente suas dependências.
Bremover as dependências do array de useEffect, evitando novas execuções e alterações nas variáveis utilizadas.
Cdeclarar as funções dentro do JSX para evitar a recriação de funções fora do escopo do componente.
Dconverter funções para classes com PureComponent, mantendo a passagem de funções anônimas como props.
Eutilizar useEffect para encapsular a declaração das funções, mantendo a forma como são recriadas a cada renderização.
Revelar gabarito e comentário▾
GabaritoA — envolver as funções passadas como props com useCallback, definindo corretamente suas dependências.
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Otimização de desempenho em React: useCallback
Gabarito: letra A. O hook useCallback é a técnica adequada para estabilizar a referência de funções passadas como props para componentes memoizados com React.memo, evitando re-renderizações desnecessárias causadas pela criação de novas referências a cada renderização, sem comprometer a consistência do estado.
O problema descrito ocorre porque React.memo realiza uma comparação superficial (shallow comparison) das props. Funções anônimas ou funções declaradas dentro do corpo do componente são recriadas a cada render, gerando uma nova referência mesmo que o comportamento seja idêntico. Isso faz com que React.memo entenda que a prop mudou e dispare uma nova renderização no componente filho, anulando o benefício da memoização.
useCallback retorna uma versão memoizada da função, que só será recriada quando suas dependências forem alteradas. Dessa forma, a referência permanece estável entre renderizações, e o React.memo pode efetivamente evitar re-renderizações desnecessárias.
Técnica
Descrição
Efeito sobre a referência da função
Efeito sobre re-renderizações desnecessárias
Consistência de estado
A) useCallback com dependências corretas
Hook que retorna função memoizada, recriada apenas quando as dependências mudam
Estabiliza a referência
Evita re-renderizações em componentes memoizados
Mantida, pois as dependências são explicitamente listadas
B) Remover dependências do useEffect
Prática insegura que omite dependências do array
Não estabiliza a referência da função
Não resolve o problema
Comprometida (risco de closures obsoletos)
C) Declarar funções dentro do JSX
Função anônima inline no JSX
Cria nova referência a cada render
Agrava o problema
Mantida
D) Converter para PureComponent
Componente de classe com comparação superficial de props
Não estabiliza a referência (função anônima ainda muda)
Não resolve o problema
Mantida
E) Encapsular funções em useEffect
Hook para efeitos colaterais, não para memoização
Não estabiliza a referência
Não resolve o problema
Mantida
Alternativa A — ✅ Correta ⟵ GABARITO
useCallback(fn, deps) retorna a mesma função enquanto as dependências não mudarem, estabilizando a referência. Deve-se listar corretamente as dependências no array para evitar closures obsoletos. É a solução direta e recomendada pelo React.
Alternativa B — ❌ Incorreta
Remover dependências do array de useEffect não tem relação com a estabilização de referências de funções. Além disso, isso pode causar bugs de staleness e não é uma prática segura. O useEffect é para efeitos colaterais, não para memoização.
Alternativa C — ❌ Incorreta
Declarar funções dentro do JSX (ex.: onClick={() => fazAlgo()}) cria uma nova função a cada renderização, agravando o problema de referências instáveis. A declaração fora do JSX não muda o fato de que a função é recriada.
Alternativa D — ❌ Incorreta
PureComponent (em componentes de classe) também realiza comparação superficial de props. Se funções anônimas são passadas, a referência muda a cada render, então PureComponent não impedirá a re-renderização. A solução não é converter para classe, e sim usar useCallback (ou bind no construtor, mas isso foge ao escopo).
Alternativa E — ❌ Incorreta
useEffect não é projetado para memoizar funções. Ele executa efeitos colaterais após a renderização. Encapsular a declaração da função dentro de useEffect não estabiliza sua referência; a função ainda será recriada a cada render.
PEGA ESSA DICA!
Sempre que usar React.memo em um componente filho e passar funções como props, lembre-se de envolvê-las com useCallback. Da mesma forma, valores calculados podem ser memoizados com useMemo. Isso maximiza o ganho de desempenho e evita re-renderizações em cascata.