My React Component is rendering twice because of Strict Mode #10
-
|
I have been reading a bunch of React code and I see stuff like this that I don't understand: |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments
-
|
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( ReactDOM.render( |
Beta Was this translation helpful? Give feedback.
-
|
Your React component is rendering twice because React.StrictMode is enabled in development. This is intentional to help catch potential issues, but it doesn’t affect production. If it’s causing problems, you can remove <React.StrictMode> from index.js: import React from "react"; ReactDOM.render( However, it’s generally best to ignore this behavior since it only happens in development. Your handleChange function might run twice due to this, but in production, it will work normally. 🚀 Just keep coding😃 |
Beta Was this translation helpful? Give feedback.
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')
…