Considere o seguinte código em JavaScript com Reactimport Re...

Próximas questões
Com base no mesmo assunto
Q2398324 Programação

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á:

Alternativas

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:

  1. 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.
  2. 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