react runtime_error ai_generated true

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

ID: react/typeerror-cannot-read-properties-of-null-reading-usestate

Also available as: JSON · Markdown · 中文
88%Fix Rate
85%Confidence
1Evidence
2024-03-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 18.2.0 active — — —
React 18.3.0-canary active — — —
React 19.0.0-rc active — — —

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.

generic

中文

React 的 useState 钩子是在 null 上下文中被调用的，通常是因为使用钩子的组件不是有效的 React 函数组件，或者钩子在组件的渲染周期之外被调用。

Official Documentation

https://react.dev/reference/react/useState

Workarounds

  1. 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>; } 
    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. 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/ 
    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. 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. 
    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.

中文步骤

  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>; }
  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/
  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.

Dead Ends

Common approaches that don't work:

  1. Wrap the entire component in a React.StrictMode component 95% fail

    StrictMode only highlights potential issues; it doesn't fix the root cause of hooks being called outside a component.

  2. Add a constructor in a function component to initialize state 100% fail

    Function components do not support constructors; this will cause a syntax error or undefined behavior.

  3. Use class component syntax without converting fully 90% fail

    Mixing class and function component patterns leads to hooks being called in invalid contexts, exacerbating the error.