1 min de leitura ·

Por que o useState não reseta pro valor inicial quando o componente é remontado?

Duvida sobre o useState


import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);

  console.log("component render");

  const doubleCount = count * 2;

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
          double count is {doubleCount}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  );
}

export default App;

Toda vez que o valor de "count" muda, o componente é remontado, e tudo dentro dele é executado novamente, fazendo assim com que "console.log" apareça toda vez que o componente for renderizado, e "doubleCount" sempre tenha o valor de count * 2.

Alguém sabe me dizer por que essa lógica não se aplica na declaração const [count, setCount] = useState(0);?

Por que o estado de count não reseta pra 0 quando o componente é renderizado?
O que o react faz por baixo dos pano para que este comportamento não ocorra?

Edson295

1 ano atrás

Se você experimentar testar sua constante "doubleCount" a receber um valor não associado ao "count" você vai ver que ela também não está zerando.

O seu console log aparentemente é chamado toda vez que clica porque isso está no escopo da função, não pq o componente "é executado novamente" como você acredita.

Eu não entendo nada de react kk, mas fiz um teste alterando o "doubleCount" e percebi esses detalhes. Acho que sua premissa está equivocada.

SonharSofredor

1 ano atrás

"const [count, setCount] = useState(0);" => esse "(0)" é apenas o valor inicial , não oq vai ser caso o component seja "re-renderizado", o valor so voltaria a zero caso o componente fosse "desconstruido" e construido novamente do zero.

Os state por baixo do pano ficam armazenados na memoria.

viniciusvas90

1 ano atrás

Existe uma diferença entre o componente ser "montado" e "re-renderizado"
Toda vez que o componente é re-renderizado, o seu console.log é executado, mas isso não quer dizer que ele foi remontado.

Toda vez que o valor de "count" muda, o componente é remontado

^ Errado! Toda vez que o valor de "count" muda, o componente é re-renderizado, ele não remonta do zero

O state (count) não vai ser resetado para o valor inicial quando o componente re-renderiza.
Esse é o motivo inclusive de se utilizar o useState ao invés de simplesmente declarar uma variável solta dentro do componente. Pq código solto, fora dos hooks, vai executar toda vez que re-renderizar, resetando tal variável.

Estude e experimente o useEffect, ele vai te dizer quando o componente é montado ou desmontado.

useEffect(() => {
  console.log('componente montado')
  return () => {
    console.log('componente desmontado')
  }
}, [])

O que o react faz por baixo dos pano para que este comportamento não ocorra?

O que o react faz por baixo dos pano para que este comportamento não ocorra?

Isso eu não sei te responder pq nunca olhei dentro do código do react nesse nível