Accepted answer

Your app is using StrictMode. See your index.js file - your app is wrapped between a <React.StrictMode> element.

Using StrictMode will cause your app to render twice, but only in development mode. Creating an app with create-react-app will enable strict mode by default.

Here are the official docs for strict mode.

The solution is just to remove <React.StrictMode>, but that will also disable some of its advantages, so if it doesn't bother you, I'd just leave it as is, knowing it won't render like that in production.

See this related question for more details: My React Component is rendering twice because of Strict Mode


Obviously that re-rendering thing is definitely not a bug, or something related with the library's render mechanism. On the contrary it is a debugging mechanism provided by React 🤗

refer this blog you'll get better understanding .

you can disable strictmode refer this sandbox'll only render once .

Related Query

More Query from same tag