React Component Not Re-rendering? Common Causes

A component re-renders when its state, props, or subscribed context changes. If the screen is stale, inspect each input at the component that should update.

Check the reference and the key

• Create new object and array references when updating state.
• Use stable keys from the data identity; avoid array indexes for reorderable lists.
• Confirm the parent actually passes the new prop.

// Stable identity lets React match the right item
items.map(item => <Row key={item.id} item={item} />);

Look at memoization

memo skips a render when props compare equal. A custom comparison can accidentally ignore the field that changed. Remove memoization temporarily to test that hypothesis.

Render probe

Put a temporary counter or console.count inside the component. If it renders with the right value, the remaining problem is layout, CSS, or a stale derived calculation.

Check context and external stores

Consumers update only when the provider value or selected store slice changes. Confirm the provider is above the component and that selectors subscribe to the field you are changing.

Still stuck with a React or Next.js bug? See React & Next.js debugging help.

Related notes

React State Not Updating? What to Check
How to Fix Hydration Errors in Next.js