Why Multiple Renders with useState in Non-Strict Mode?

When using useState in React, you might notice your component rendering more than once. This behavior, which can appear even without enabling strict mode, requires some clarification.

Upon clicking the "Change number" button, you'll observe two console statements ("here") due to an extra component render. The reason behind this is not strict mode, as previously suggested. Instead, React triggers a double render to facilitate a more deterministic development environment.

According to React's documentation, non-strict mode in development does the following:

• Intentionally invokes component constructor, render, and state updater functions twice.
• Doubles the invocation of function components' bodies and hooks like useState.

This double rendering provides an opportunity to detect potential side effects in your code, highlighting performance issues or bugs early on. While this extra rendering doesn't occur in production, it serves as a valuable troubleshooting aid during development.