Considere o seguinte código em JavaScript com Reactimport Re...
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á:
Gabarito comentado
Confira o gabarito comentado por um dos nossos professores
Alternativa correta: C - 15.
Vamos entender o código e o motivo pelo qual a resposta correta é a alternativa C:
O componente funcional Number em React inicializa duas variáveis locais x e y, ambas com o valor 5. Em seguida, é utilizado o hook useState para criar uma variável de estado n, iniciada com o valor de x, que também é 5. A função setN é utilizada para atualizar o valor de n.
O hook useEffect é executado após a primeira renderização do componente, já que o segundo argumento é um array vazio, indicando que o efeito não depende de nenhum valor ou estado e deve ser executado apenas uma vez.
Dentro do useEffect, duas chamadas são feitas à função setN:
- A primeira chamada é setN(x => x + n), que atualiza o valor de n com base no seu valor atual mais o valor de x. Como x e n são ambos 5, isso atualiza n para 10.
- A segunda chamada é setN(y => x + y), que parece estar tentando atualizar o valor de n com base na soma de x e y. No entanto, há um detalhe importante aqui: a variável x na função não é referente ao valor de x no escopo do componente, mas sim ao valor atual de n que foi definido na primeira chamada de setN. Portanto, essa chamada à função setN utiliza o valor atualizado de n (que é 10) e adiciona y (que é 5), resultando em 15.
Portanto, após a execução do useEffect, o valor final de n é 15. Quando o componente é renderizado, ele retorna o valor atual de n, que é justamente 15.
Por este motivo, a alternativa C é a correta, pois o valor retornado pelo componente Number após a renderização final será 15.
Clique para visualizar este gabarito
Visualize o gabarito desta questão clicando no botão abaixo
Comentários
Veja os comentários dos nossos alunos
Variáveis chamadas x e y, e colocamos o número 5 dentro de cada uma delas. Então, tanto x quanto y começam com o valor 5.
Em seguida, temos uma caixinha especial chamada n, que é um pouco diferente porque ela vem com um botão (setN) que nos permite mudar o que está dentro dela. Inicialmente, decidimos colocar dentro dela o mesmo valor que está em x, ou seja, 5.
Agora, usamos (o useEffect), mas prometemos usar essa mágica apenas uma vez (por isso temos [] no final). Com essa mágica, vamos mudar o que está dentro da caixinha n duas vezes, usando o botão setN.
Na primeira vez que usamos a mágica, tentamos adicionar o valor atual de n a ele mesmo. Mas aqui, cometemos um pequeno erro na explicação. A forma como fizemos isso acaba não sendo direta, e parece que queremos pegar o valor dentro de n (que começou como 5), e somar com o valor inicial de n (também 5), então tentamos fazer n se tornar 10. Mas a confusão com x e n na explicação anterior complica um pouco as coisas. O objetivo parece ser dobrar o valor de n.
Na segunda vez, o plano era adicionar 5 (o valor de y) ao valor atual de n. Então, se antes tentamos fazer n virar 10, agora queremos adicionar 5 a isso, fazendo n chegar a 15.
Clique para visualizar este comentário
Visualize os comentários desta questão clicando no botão abaixo