Considere o seguinte código em JavaScript com React import React from 'react'; function Number() { let x = 5, y = 5; const [n, setN] = React.useState(x); React.useEffect(() => { setN(x => x + n); setN(y => x + y); }, []) return n; } Ao se utilizar o componente funcional Number, o valor retornado por Number após a renderização final será:
- A)5;
Errada, porque o estado inicial e 5, mas o useEffect altera n na primeira execucao.
- B)10;
Correta apenas como valor intermediario, mas nao e o valor final apos as chamadas do efeito.
- C)15;
Correta, porque a primeira atualizacao leva n de 5 para 10 e a segunda apenas grava novamente 10.
- D)20;
Errada, porque nao ha duas somas acumuladas sobre o mesmo estado final neste caso.
- E)55.
Errada, pois nao existe multiplicacao nem concatenacao de valores que leve a 55.
Gabarito: C
Neste tipo de questao, o ponto central e entender como o React trata o estado e as funcoes passadas para setState. O useState(x) inicia n com 5. Depois, o useEffect roda apenas uma vez porque o array de dependencias esta vazio. Dentro dele, a primeira chamada setN(x => x + n) usa atualizacao funcional, entao o valor anterior do estado entra na conta. Como n ainda vale 5 naquele momento, o novo estado vira 10. A segunda chamada, setN(y => x + y), nao soma com o estado anterior: ela simplesmente substitui o estado pelo resultado da funcao. Como x e y locais valem 5 e 5, o resultado e 10 de novo. Em outras palavras, a segunda chamada nao aumenta o valor para 20 porque ela nao usa o estado ja atualizado, apenas grava outro 10 por cima. Resultado final: n fica 10 apos a renderizacao provocada pelo efeito. A questao testa bem esse detalhe classico de React: chamadas sucessivas de setState podem ser agrupadas, e o valor capturado pelo closure no useEffect permanece o da renderizacao em que o efeito foi criado. A FGV adora esse tipo de armadilha com estado, closure e atualizacao funcional.