|
| 1 | +--- |
| 2 | +title: Invalid Hook Call Warning |
| 3 | +layout: single |
| 4 | +permalink: warnings/invalid-hook-call-warning.html |
| 5 | +--- |
| 6 | + |
| 7 | + You are probably here because you got the following error message: |
| 8 | + |
| 9 | + > Hooks can only be called inside the body of a function component. |
| 10 | +
|
| 11 | +There are three common reasons you might be seeing it: |
| 12 | + |
| 13 | +1. You might have **mismatching versions** of React and React DOM. |
| 14 | +2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**. |
| 15 | +3. You might have **more than one copy of React** in the same app. |
| 16 | + |
| 17 | +Let's look at each of these cases. |
| 18 | + |
| 19 | +## Mismatching Versions of React and React DOM |
| 20 | + |
| 21 | +You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.60) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below). |
| 22 | + |
| 23 | +## Breaking the Rules of Hooks |
| 24 | + |
| 25 | +You can only call Hooks **while React is rendering a function component**: |
| 26 | + |
| 27 | +* ✅ Call them at the top level in the body of a function component. |
| 28 | +* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html). |
| 29 | + |
| 30 | +**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).** |
| 31 | + |
| 32 | +```js{2-3,8-9} |
| 33 | +function Counter() { |
| 34 | + // ✅ Good: top-level in a function component |
| 35 | + const [count, setCount] = useState(0); |
| 36 | + // ... |
| 37 | +} |
| 38 | +
|
| 39 | +function useWindowWidth() { |
| 40 | + // ✅ Good: top-level in a custom Hook |
| 41 | + const [width, setWidth] = useState(window.innerWidth); |
| 42 | + // ... |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +To avoid confusion, it’s **not** supported to call Hooks in other cases: |
| 47 | + |
| 48 | +* 🔴 Do not call Hooks in class components. |
| 49 | +* 🔴 Do not call in event handlers. |
| 50 | +* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`. |
| 51 | + |
| 52 | +If you break these rules, you might see this error. |
| 53 | + |
| 54 | +```js{3-4,11-12,20-21} |
| 55 | +function Bad1() { |
| 56 | + function handleClick() { |
| 57 | + // 🔴 Bad: inside an event handler (to fix, move it outside!) |
| 58 | + const theme = useContext(ThemeContext); |
| 59 | + } |
| 60 | + // ... |
| 61 | +} |
| 62 | +
|
| 63 | +function Bad2() { |
| 64 | + const style = useMemo(() => { |
| 65 | + // 🔴 Bad: inside useMemo (to fix, move it outside!) |
| 66 | + const theme = useContext(ThemeContext); |
| 67 | + return createStyle(theme); |
| 68 | + }); |
| 69 | + // ... |
| 70 | +} |
| 71 | +
|
| 72 | +class Bad3 extends React.Component { |
| 73 | + render() { |
| 74 | + // 🔴 Bad: inside a class component |
| 75 | + useEffect(() => {}) |
| 76 | + // ... |
| 77 | + } |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes. |
| 82 | + |
| 83 | +>Note |
| 84 | +> |
| 85 | +>[Custom Hooks](/docs/hooks-custom.html) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering. |
| 86 | +
|
| 87 | + |
| 88 | +## Duplicate React |
| 89 | + |
| 90 | +In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package. |
| 91 | + |
| 92 | +If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package. |
| 93 | + |
| 94 | +If you use Node for package management, you can run this check in your project folder: |
| 95 | + |
| 96 | + npm ls react |
| 97 | + |
| 98 | +If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround. |
| 99 | + |
| 100 | +You can also try to debug this problem by adding some logs and restarting your development server: |
| 101 | + |
| 102 | +```js |
| 103 | +// Add this in node_modules/react-dom/index.js |
| 104 | +window.React1 = require('react'); |
| 105 | + |
| 106 | +// Add this in your component file |
| 107 | +require('react-dom'); |
| 108 | +window.React2 = require('react'); |
| 109 | +console.log(window.React1 === window.React2); |
| 110 | +``` |
| 111 | + |
| 112 | +If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community. |
| 113 | + |
| 114 | +This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy. |
| 115 | + |
| 116 | +>Note |
| 117 | +> |
| 118 | +>In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with. |
| 119 | +
|
| 120 | +## Other Causes |
| 121 | + |
| 122 | +If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it. |
0 commit comments