# TypeError: Cannot read properties of null (reading 'useState')

- **ID:** `react/typeerror-cannot-read-properties-of-null-reading-usestate`
- **Domain:** react
- **Category:** runtime_error
- **Verification:** ai_generated
- **Fix Rate:** 88%

## Root Cause

React's useState hook is being called from a null context, typically because the component using hooks is not a valid React function component or the hooks are being called outside of a component's render cycle.

## Version Compatibility

| Version | Status | Introduced | Deprecated |
|---------|--------|------------|------------|
| React 18.2.0 | active | — | — |
| React 18.3.0-canary | active | — | — |
| React 19.0.0-rc | active | — | — |

## Workarounds

1. **Ensure the component is a valid React function component that returns JSX and does not call hooks conditionally or inside loops. Example: function MyComponent() { const [state, setState] = useState(initialValue); return <div>{state}</div>; }** (85% success)
   ```
   Ensure the component is a valid React function component that returns JSX and does not call hooks conditionally or inside loops. Example: function MyComponent() { const [state, setState] = useState(initialValue); return <div>{state}</div>; }
   ```
2. **Move all hook calls to the top level of the component body, never inside callbacks or after early returns. Use a linter like eslint-plugin-react-hooks to catch violations: npx eslint --fix src/** (90% success)
   ```
   Move all hook calls to the top level of the component body, never inside callbacks or after early returns. Use a linter like eslint-plugin-react-hooks to catch violations: npx eslint --fix src/
   ```
3. **If using custom hooks, verify they are invoked inside a function component and not in a utility function or event handler. Wrap the call in a component if needed.** (80% success)
   ```
   If using custom hooks, verify they are invoked inside a function component and not in a utility function or event handler. Wrap the call in a component if needed.
   ```

## Dead Ends

- **Wrap the entire component in a React.StrictMode component** — StrictMode only highlights potential issues; it doesn't fix the root cause of hooks being called outside a component. (95% fail)
- **Add a constructor in a function component to initialize state** — Function components do not support constructors; this will cause a syntax error or undefined behavior. (100% fail)
- **Use class component syntax without converting fully** — Mixing class and function component patterns leads to hooks being called in invalid contexts, exacerbating the error. (90% fail)