Strict Mode & Concurrent Features
5 questions foundWhat is React Strict Mode and what does it actually do?
Beginner Strict Mode is a development only tool that helps find potential problems in your app early, before they cause real bugs. It does not render anything visible itself, but it intentionally runs certain functions twice during development, like component bodies and some effects, to help surface code that accidentally relies on something being run only once.
import { StrictMode } from 'react';
function App() {
return (
<StrictMode>
<MainApp />
</StrictMode>
);
}
Real-world example A team wraps their entire app in Strict Mode during development, which helps them catch a bug where a component was accidentally causing a side effect directly during rendering, something that would have been much harder to notice otherwise.
Common follow-ups: Does Strict Mode have any effect on the app once it is built for production?;Why does Strict Mode intentionally run some code twice instead of just once?
Effects & Lifecycle;Testing
Why does Strict Mode call component functions and certain effects twice during development?
Intermediate This intentional double calling helps reveal components or effects that are not properly written to handle being interrupted or repeated, which matters for React's newer concurrent rendering features. If running something twice causes a visible problem, it usually means that code has a hidden bug, such as an effect missing its cleanup function.
useEffect(() => {
const subscription = subscribeToUpdates();
return () => subscription.unsubscribe(); // without this cleanup, Strict Mode reveals a leak
}, []);
Real-world example A developer notices duplicate event subscriptions appearing only in development with Strict Mode enabled, and traces it back to an effect that was missing its cleanup function, a real bug that Strict Mode helped catch early.
Common follow-ups: Would this same duplicate subscription bug also happen in production without Strict Mode?;How do you fix a component that behaves unexpectedly when Strict Mode calls it twice?
Effects & Lifecycle;Custom Hooks
What are concurrent features in React, and how do they relate to Strict Mode?
Advanced Concurrent features let React prepare more than one version of the user interface at the same time, pausing and resuming work as needed, so the app stays responsive even while handling a large or slow update. Strict Mode helps prepare your code for this by catching patterns that would not work reliably if React decided to pause, restart, or throw away an in progress render.
// A component written safely for concurrent rendering, avoiding side effects during render
function ProductList({ products }) {
const sorted = useMemo(() => [...products].sort(), [products]); // pure, safe to be called multiple times
return <List items={sorted} />;
}
Real-world example A team adopts useTransition for a slow filtering feature, and thanks to already having fixed several issues revealed by Strict Mode beforehand, the concurrent rendering feature works correctly without any unexpected bugs.
Common follow-ups: What specifically makes a component 'safe' for React's concurrent rendering?;How does automatic batching, another concurrent feature, change how multiple state updates are handled together?
Concurrent Hooks (useTransition useDeferredValue & useLayoutEffect);Performance (memo/useMemo)
What is automatic batching in React, and how does it improve performance?
Intermediate Automatic batching means React groups multiple state updates that happen close together into a single re render, instead of re rendering separately for each one. This reduces unnecessary rendering work, and modern React applies this batching consistently, even inside things like promises and event handlers where it previously did not happen automatically.
function handleClick() {
setCount((c) => c + 1);
setFlag((f) => !f);
// React batches both of these together into a single re render
}
Real-world example A form that updates three separate pieces of state inside one click handler only causes a single re render instead of three separate ones, thanks to React's automatic batching combining all three updates together.
Common follow-ups: Did earlier versions of React batch updates inside things like setTimeout callbacks the same way?;How would you force an update to happen immediately instead of being batched, if truly needed?
Performance (memo/useMemo);Hooks
Should you leave Strict Mode enabled in your app permanently, or only use it temporarily?
Beginner Strict Mode is generally recommended to stay enabled throughout an entire project's development, since it continues to help catch new problems as the codebase grows and changes over time. It has no effect at all on the production build, so there is no downside to leaving it on during development.
// A typical setup, Strict Mode wraps the whole app and stays enabled long term
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>
);
Real-world example A team keeps Strict Mode enabled across their entire project's lifetime, catching several small bugs introduced by new features over time before they ever reached real users in production.
Common follow-ups: Are there any legitimate reasons a team might choose to disable Strict Mode for part of their app?;How would you gradually introduce Strict Mode into a large existing codebase that was not using it before?
Testing;Custom Hooks