CODEWITHSUNDEEP
reactjsreact-hooks
Prakash
Prakash

Reputation: 21

react functional component remounts if i have useState

function App() {
  const [foo, setfoo] = React.useState(1);
  console.log('app')
  return (<div></div>);
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

in the above code i see the console.log twice. if I comment out the useState line it logs only once? why should useState cause the re-mounting of component?

Upvotes: 2

Views: 218

Answers (1)

Amirabbas
Amirabbas

Reputation: 36

it's because of the React.StrictMode

simply react might render some components more than once so React.StrictMode comes in to help you detect those components so you don't miss any accidental side effects

it won't cause any problem and this is only going to happen in development mode

if you want to know more about it you can read more in the official documentation

Upvotes: 1

Related Questions