Common React UI Bugs and How to Fix Them

Common React UI Bugs and How to Fix Them

React UIs have predictable bugs. Here are the common ones and how to fix each.

Blank Screen

Usually a build error, a wrong API URL, or a missing environment variable. Check the console and the Network tab. Often an error boundary is missing, so the user sees white.

Stale UI After Update

A wrong useEffect dependency array, or a stale closure. Fix the dependency array with the lint plugin, so the effect re-runs when the relevant values change.

Inputs Showing Wrong Data in Lists

Using array index as the key in a list, so React reuses the wrong elements. Use a stable unique id from your data as the key.

Infinite Re-render Loop

Calling a state setter in the render body or with a wrong dependency array. Move the setter into an event handler or fix the dependency array.

State Updates Not Reflecting

Mutating state directly instead of using the setter, or mutating an object in place. Always use the setter and replace objects and arrays with new copies.

Memory Leak Warnings

Forgetting to clean up subscriptions, timers, or WebSocket connections on unmount. Return a cleanup function from useEffect for anything you set up.

Route 404 After Deploy

The host serves 404 for routes that are not files. Configure the host to redirect all routes to index.html, so React Router handles them.

The Takeaway

Common React UI bugs include blank screens, stale UI, list input bugs from index keys, infinite loops, state updates not reflecting, memory leaks, and route 404s after deploy. Each has a clear fix once you recognize the symptom.