I have a question about React Lifecycle.

Asked 2 years ago, Updated 2 years ago, 110 views

import React from 'react';

function App() {

  const [count, setCount] = React.useState(0);

  const handler = () => setCount(count+1);

  React.useEffect(() => {
    console.log ("Rendering Complete")
  }, []);

  console.log(123123);

  return (
    <div className="App">
      {count}
      <button onClick={handler}>+</button>
    </div>
  );
}

export default App;

Once the above code is executed, the console

123123
123123
Rendering complete

Like this, 123123 comes up twice, but I think it's right to come up once, but it comes up twice. If you use hook, it pops up twice, and if you don't, it pops up once, so I wonder why it's like this.

react

2022-09-20 20:49

1 Answers

https://github.com/facebook/react/issues/15074

Intended feature of Strict Mode It only occurs in development environments.

It is said to run twice to find unexpected side effects that occur when entering the rendering stage.

This phenomenon is expected to run normally once after production build.


2022-09-20 20:49

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.