| Cause | Symptom | Primary Fix |
|---|---|---|
| React Strict Mode (Dev Only) | Screen flickering or UI jumping | Ensure side effects are inside useEffect |
| State Mutations | Inconsistent data displays | Keep components pure and idempotent |
| Synchronous API Calls | Empty UI then data pop | Implement loading states or skeletons |
What is React Strict Mode Double Render Flicker?
React Strict Mode double render flicker occurs when React intentionally invokes your component’s body twice during the development phase. This feature is designed to help developers identify side effects that should not exist in the render phase.
When a component renders twice, any impure logic—such as direct variable mutations or setting global states—runs twice. This can lead to a visual “flash” or “flicker” as the UI updates, reverts, and updates again in milliseconds.
It is important to note that this behavior only happens in development mode. In production builds, React does not double-render your components, and the flicker typically disappears. However, the flicker usually points to a deeper logic flaw in your code.
Step-by-Step Solutions
1. Move Side Effects to useEffect
The most common cause of flickering is executing side effects directly in the component body. React expects the render function to be a pure function.
If you are calling an API or modifying the DOM directly in the function body, move it into a `useEffect` hook.
// Incorrect: Side effect in render
const MyComponent = () => {
const data = fetchData(); // This causes flickers in Strict Mode
return <div>{data}</div>;
};
// Correct: Side effect in useEffect
const MyComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
setData(fetchData());
}, []);
return <div>{data}</div>;
};
2. Ensure Idempotent Cleanup Functions
In Strict Mode, React also mounts, unmounts, and remounts components. If your `useEffect` creates a subscription or a timer, you must provide a cleanup function to prevent memory leaks and UI glitches.
Ensure your cleanup function resets the state or removes listeners. If the cleanup is missing, the second render may overlap with the first, causing visual inconsistencies.
3. Use useMemo for Expensive Calculations
If the flicker is caused by a heavy calculation that runs twice and slows down the main thread, wrap that logic in `useMemo`. This ensures the value is cached and doesn’t trigger layout shifts between the double renders.
4. Temporarily Disable Strict Mode
If you need to verify that the issue is strictly a development-only artifact, you can temporarily disable Strict Mode in your entry file.
Locate your `main.jsx` or `index.js` file and remove the wrapper. Note that this is not a permanent solution, as you lose the bug-finding benefits of the tool.
// Remove these tags in index.js
<React.StrictMode>
<App />
</React.StrictMode>