Why is my function being called twice in React?

by

Its because your app component is a wrap in StrictMode.

<React.StrictMode>
  <App />
</React.StrictMode>,

If you are using create-react-app then it is found in index.js

It is expected that setState updaters will run twice in strict mode in development. This helps ensure the code doesn’t rely on them running a single time (which wouldn’t be the case if an async render was aborted and later restarted). If your setState updaters are pure functions (as they should be) then this shouldn’t affect the logic of your application.

https://github.com/facebook/react/issues/12856#issuecomment-390206425

More Related Contents:

  1. Why is setState in reactjs Async instead of Sync?
  2. React / JSX Dynamic Component Name
  3. How do I render components with different layouts/elements using react-router-dom v6
  4. Update style of a component onScroll in React.js
  5. Rendering React Components from Array of Objects
  6. Where can I make API call with hooks in react?
  7. How to perform debounce?
  8. React input defaultValue doesn’t update with state
  9. onClick doesn’t render new react component.
  10. How to assign refs to multiple components
  11. Access Control Origin Header error using Axios
  12. Node.js Sass version 7.0.0 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0
  13. Warning: Function components cannot be given refs
  14. How do I reload a page with react-router?
  15. Using JavaScript Axios/Fetch. Can you disable browser cache?
  16. React.js ES6 avoid binding ‘this’ to every method
  17. React Native: Using lodash debounce
  18. Save data in a special order when click on button
  19. Environment variables not working (Next.JS 9.4.4)
  20. Axios posting params not read by $_POST
  21. Reactjs – Setting State from props using setState in child component
  22. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  23. XMLHttpRequest cannot load No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000’ Google maps
  24. React hooks useState setValue still rerender one more time when value is equal
  25. Converting Responsive Grid Layout to Plotly Dash
  26. Trying to use React.DOM to set body styles
  27. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  28. How to have nested loops with map in JSX?
  29. Destructuring of es6 but passing dynamic variable
  30. updateProfile is not a function (Firebase)

Leave a Comment