My React Component is rendering twice because of Strict Mode

by

StrictMode renders components twice (on dev but not production) in order to detect any problems with your code and warn you about them (which can be quite useful).

If you have StrictMode enabled in your app but don’t remember enabling it, it might be because you used create-react-app or similar to create your app initially, which automatically enables StrictMode by default.

For example, you might find that your {app} is wrapped by <React.StrictMode> in your index.js:

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

If so, you can disable StrictMode by removing the <React.StrictMode> tag:

  ReactDOM.render(
    {app}
    document.getElementById('root')
  );

More Related Contents:

  1. React – Display loading screen while DOM is rendering?
  2. React vs ReactDOM?
  3. When exactly is `componentDidMount` fired?
  4. How to display svg icons(.svg files) in UI using React Component?
  5. How can I persist redux state tree on refresh?
  6. How to use callback with useState hook in react [duplicate]
  7. Why do the React docs recommend doing AJAX in componentDidMount, not componentWillMount?
  8. ReactJS: Why is passing the component initial state a prop an anti-pattern?
  9. React: Expected an assignment or function call and instead saw an expression
  10. How to use throttle or debounce with React Hook?
  11. Why, exactly, do we need React.forwardRef?
  12. You should not use outside a
  13. Next.js – Error: only absolute urls are supported
  14. Installing create-react-app gives npm ERR! shasum check failed and npm ERR! Unexpected end of JSON input while parsing near ‘…mojOzGIEI2rg0m24Yb5Oq’
  15. IMAGE: You may need an appropriate loader to handle this file type
  16. Nested Routes not rendering with React Router v4
  17. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  18. How to use comments in React
  19. Visual studio code changes format (React-JSX)
  20. Error while creating new React app (“You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)”)
  21. Re-initializing class on redirect
  22. ReactJs CreateClass is not a function
  23. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  24. webpack can’t find module if file named jsx
  25. How should I configure create-react-app to serve app from subdirectory?
  26. react routing is able to handle different url path but tomcat returns 404 not available resources
  27. React: Why component’s constructor is called only once?
  28. Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema
  29. Relative path in index.html after build
  30. combine react build output into single js file

Leave a Comment