Symptoms & Diagnosis
A React application “freezing” usually means the JavaScript main thread is blocked. When this happens, the browser cannot process user input, animations stop, and the “Page Not Responding” dialog eventually appears.
You can diagnose this by observing CPU usage spikes in your Task Manager. If the UI stops responding immediately after a specific state change or navigation, you likely have an execution bottleneck.
Using Chrome DevTools
Open the Performance tab in Chrome DevTools. Click “Record” and interact with your app until it freezes. Look for long red bars labeled “Long Task.” These indicate scripts taking longer than 50ms to execute, which is the threshold for perceived lag.
Troubleshooting Guide
Debugging a freeze requires isolating whether the issue is an infinite loop, an expensive calculation, or excessive re-renders.
1. Check for Infinite Loops
The most common cause of a total freeze is an infinite loop inside a useEffect or a component body. This often happens when a state update triggers a re-render, which then triggers the same state update again.
2. Analyze Re-render Patterns
Use the React DevTools Profiler to record a session. The “Ranked” chart will show you exactly which components took the longest to render and why. If a component is rendering hundreds of times in a second, you have found your culprit.
| Issue | Common Cause | Detection Tool |
|---|---|---|
| Infinite Loop | Incorrect useEffect dependencies. |
Console Logs / Debugger |
| Heavy Computation | Processing large arrays in the render body. | Performance Tab |
| Memory Leak | Uncleared intervals or event listeners. | Memory Tab (Heap Snapshot) |
3. Profile with External Tools
If the built-in tools aren’t providing enough detail, you can install additional profiling utilities to monitor frame rates and execution time.
npm install --save-dev web-vitalsPrevention
Preventing freezes is about keeping the main thread clear. React provides several hooks specifically designed to handle heavy workloads without blocking the UI.
Use useMemo and useCallback
Wrap expensive calculations in useMemo. This ensures the calculation only runs when specific dependencies change, rather than on every single render cycle. Similarly, use useCallback to prevent unnecessary child component updates.
Concurrent Rendering
If you are using React 18 or later, leverage useTransition or useDeferredValue. These hooks allow you to mark state updates as non-urgent, letting React interrupt the rendering if the user performs a higher-priority action like typing or clicking.
Offload to Web Workers
For extremely heavy data processing, move the logic out of the main thread entirely. Web Workers allow you to run JavaScript in a background thread, ensuring your React UI remains buttery smooth regardless of the computational load.