Fix TypeError: Cannot read properties of null (reading 'useState') in React

This error occurs when React hooks are called outside a component or when multiple copies of React exist in the bundle. Common causes include calling useState in a regular function, having mismatched React versions, or incorrect bundler configuration. Fix it by ensuring hooks are only called inside React function components.

Reading the Stack Trace

Here's what each line means:

• at useState (node_modules/react/cjs/react.development.js:1622:21): React's internal dispatcher is null, meaning useState was called outside the React rendering lifecycle.
• at Counter (/app/src/components/Counter.tsx:4:35): The Counter component at line 4 calls useState, but React's internal state is not initialized for this call.
• at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:16305:18): React's hook system failed to initialize properly, possibly due to duplicate React instances.

Common Causes

// package.json of linked library
{
  "dependencies": {
    "react": "^18.2.0"  // Should be in peerDependencies
  }
}

import { useState } from 'react';

// Wrong: this is not a component
function getCount() {
  const [count, setCount] = useState(0);
  return count;
}

export default function Counter() {
  return <span>{getCount()}</span>;
}

// package.json
{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^17.0.2"
  }
}

The Fix

Move the useState call directly into the React function component body. Hooks must be called at the top level of a React function component or a custom hook, never inside regular functions.

import { useState } from 'react';

function getCount() {
  const [count, setCount] = useState(0);
  return count;
}

export default function Counter() {
  return <span>{getCount()}</span>;
}

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

Testing the Fix

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

describe('Counter', () => {
  it('renders the initial count', () => {
    render(<Counter />);
    expect(screen.getByText('0')).toBeInTheDocument();
  });

  it('increments the count on button click', () => {
    render(<Counter />);
    fireEvent.click(screen.getByText('Increment'));
    expect(screen.getByText('1')).toBeInTheDocument();
  });

  it('increments multiple times', () => {
    render(<Counter />);
    const button = screen.getByText('Increment');
    fireEvent.click(button);
    fireEvent.click(button);
    fireEvent.click(button);
    expect(screen.getByText('3')).toBeInTheDocument();
  });
});

Run your tests:

npm test

Pushing Through CI/CD

git checkout -b fix/usestate-hook-placement,git add src/components/Counter.tsx src/components/__tests__/Counter.test.tsx,git commit -m "fix: move useState into component body to follow Rules of Hooks",git push origin fix/usestate-hook-placement

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 npm ls react to confirm only one copy of React is installed.
2. Run the test suite to confirm hooks work correctly.
3. Open a pull request with the hook placement fix.
4. Have a teammate review and approve the PR.
5. Merge to main and verify the component renders in staging.

Frequently Asked Questions