Why does useState cause the component to render twice on each update?

by

Your App component is rendered within React.StrictMode which is what causes your code to run in strict mode and in strict mode the consoles are shown twice because each function is made to run twice in development mode

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

According to react docs:

Strict mode can’t automatically detect side effects for you, but it
can help you spot them by making them a little more deterministic.
This is done by intentionally double-invoking the following functions:

  • Class component constructor, render, and shouldComponentUpdate methods
  • Class component static getDerivedStateFromProps method
  • Function component bodies
  • State updater functions (the first argument to setState)
  • Functions passed to useState, useMemo, or useReducer

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. Nested routes with react router v4 / v5
  3. What is the difference between state and props in React?
  4. React hooks – right way to clear timeouts and intervals
  5. How to set state of response from axios in react
  6. How to import a CSS file in a React Component
  7. How can I return multiple lines JSX in another return statement in React?
  8. Removing element from array in component state
  9. React: how to load and render external html file?
  10. Binding vs Arrow-function (in JavaScript, or for react onClick)
  11. How to allow CORS in react.js?
  12. How To Solve The React Hook Closure Issue?
  13. body data not sent in axios request
  14. redux fetch body is not use with no cors mode
  15. css position absolute making the textbox go down
  16. Can’t resolve module (not found) in React.js
  17. React-router v4 – cannot GET *url*
  18. Rendering an array.map() in React
  19. Does new React Context API trigger re-renders?
  20. map function not working in React
  21. Why I receive blank page? React
  22. How to restrict access to routes in react-router?
  23. React – How to open PDF file as a href target blank
  24. Detect scroll direction in React js
  25. How to check for broken images in React JS
  26. Why is it necessary to use bind when working with ES6 and ReactJS?
  27. useMemo vs. useEffect + useState
  28. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment