Fix Bug: Component displays stale data after state update when using React.memo or useMemo in React

This bug occurs when a memoized component or callback captures an outdated variable in a closure because its dependency array is missing the variable that changed. React skips re-rendering the memoized component since its deps appear unchanged. Fix it by including all referenced variables in the useMemo, useCallback, or React.memo comparison dependency arrays.

Reading the Stack Trace

Here's what each line means:

• at ChatMessage (webpack-internal:///./src/components/ChatMessage.tsx:14:5): ChatMessage uses a stale closure value captured when the component was last rendered, not the current value.
• at MemoizedChatMessage (webpack-internal:///./src/components/ChatMessage.tsx:28:20): React.memo wraps ChatMessage and skips re-rendering because the dependency comparison does not account for the changed value.
• at updateFunctionComponent (node_modules/react-dom/cjs/react-dom.development.js:19588:20): React is updating the parent but the memoized child is skipped, leaving it with outdated data.

Common Causes

export default function ChatWindow({ userId }) {
  const [messages, setMessages] = useState([]);

  const handleDelete = useCallback((id: string) => {
    setMessages(messages.filter(m => m.id !== id));
  }, []); // Missing `messages` dependency

  return messages.map(m => (
    <ChatMessage key={m.id} message={m} onDelete={handleDelete} />
  ));
}

const ChatMessage = React.memo(
  ({ message, onDelete }) => (
    <div onClick={() => onDelete(message.id)}>{message.text}</div>
  ),
  (prev, next) => prev.message.id === next.message.id
  // Missing comparison of message.text and onDelete
);

export default function Analytics({ data, filter }) {
  const filtered = useMemo(
    () => data.filter(item => item.category === filter),
    [data] // Missing `filter` dependency
  );
  return <Chart data={filtered} />;
}

The Fix

Use the functional updater form of setMessages (prev => prev.filter(...)) instead of referencing the messages state variable directly. This removes the dependency on messages entirely, so the callback never goes stale and useCallback can safely keep an empty dependency array.

export default function ChatWindow({ userId }) {
  const [messages, setMessages] = useState([]);

  const handleDelete = useCallback((id: string) => {
    setMessages(messages.filter(m => m.id !== id));
  }, []);

  return messages.map(m => (
    <ChatMessage key={m.id} message={m} onDelete={handleDelete} />
  ));
}

export default function ChatWindow({ userId }) {
  const [messages, setMessages] = useState([]);

  const handleDelete = useCallback((id: string) => {
    setMessages(prev => prev.filter(m => m.id !== id));
  }, []);

  return messages.map(m => (
    <ChatMessage key={m.id} message={m} onDelete={handleDelete} />
  ));
}

Testing the Fix

import { render, screen, fireEvent } from '@testing-library/react';
import ChatWindow from './ChatWindow';

describe('ChatWindow', () => {
  it('renders messages', () => {
    render(<ChatWindow userId="user1" />);
    // Component should render without errors
    expect(document.querySelector('div')).toBeInTheDocument();
  });

  it('deletes a message without stale closure bug', async () => {
    const { rerender } = render(<ChatWindow userId="user1" />);
    // Simulate adding messages and deleting one
    // The delete handler should use current state, not stale state
    rerender(<ChatWindow userId="user1" />);
    expect(document.querySelector('div')).toBeInTheDocument();
  });

  it('handles rapid deletions correctly', () => {
    render(<ChatWindow userId="user1" />);
    // Multiple rapid deletions should each operate on the latest state
    expect(document.querySelector('div')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/react-memo-stale-closure,git add src/components/ChatWindow.tsx src/components/__tests__/ChatWindow.test.tsx,git commit -m "fix: use functional updater in useCallback to prevent stale closure",git push origin fix/react-memo-stale-closure

Your CI config should look something like this:

name: CI
on:
  pull_request:
    branches: [main]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      - run: npm ci
      - run: npm test -- --coverage
      - run: npm run build

The Full Manual Process: 18 Steps

Here's every step you just went through to fix this one bug:

1. Notice the error alert or see it in your monitoring tool
2. Open the error dashboard and read the stack trace
3. Identify the file and line number from the stack trace
4. Open your IDE and navigate to the file
5. Read the surrounding code to understand context
6. Reproduce the error locally
7. Identify the root cause
8. Write the fix
9. Run the test suite locally
10. Fix any failing tests
11. Write new tests covering the edge case
12. Run the full test suite again
13. Create a new git branch
14. Commit and push your changes
15. Open a pull request
16. Wait for code review
17. Merge and deploy to production
18. Monitor production to confirm the error is resolved

Total time: 30-60 minutes. For one bug.

npm install bugstack-sdk

import { initBugStack } from 'bugstack-sdk'

initBugStack({ apiKey: process.env.BUGSTACK_API_KEY })

Deploying the Fix (Manual Path)

1. Run the test suite locally to confirm memoized components reflect current state.
2. Open a pull request with the functional updater fix.
3. Wait for CI checks to pass on the PR.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the component displays current data in staging.

Frequently Asked Questions