Beginner LevelReact JS & React 19
What is React StrictMode and why does it run effects and render functions twice in development?
❓ Interview Prompt: Explain `<StrictMode>`, double rendering, double effect execution, checking component purity, and identifying side effects.
'<StrictMode>' is a development-only tool that highlights potential problems in a React application:
Why Double Execution in Development?
To help developers catch subtle bugs caused by impure render functions or missing 'useEffect' cleanup handlers, React intentionally renders components twice and executes effects twice (mount $\rightarrow$ unmount $\rightarrow$ mount) in development mode!
•
Note: Double execution occurs ONLY in development builds; it is completely stripped in production builds.
Code Implementation Example
jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(
<StrictMode>
<App /> {/* Renders components twice in dev mode to verify purity! */}
</StrictMode>
);💡Wrapping application root in React StrictMode.
🎯 Interview Key Takeaway
StrictMode intentionally runs renders and effects twice in development to uncover impure functions and missing cleanup logic.
#StrictMode#Development#Purity#Beginner
Back to all React JS & React 19 Questions→