From 95258c051661ee21c7f7dd3d9e17c0d3d9eb67b0 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 4 Feb 2019 14:26:21 +0000 Subject: [PATCH] Revert "add warning for invalid hook call" This reverts commit e3012392a3107aa47d65029a17d47721205b6db2. --- content/warnings/invalid-hook-call-warning.md | 121 ------------------ 1 file changed, 121 deletions(-) delete mode 100644 content/warnings/invalid-hook-call-warning.md diff --git a/content/warnings/invalid-hook-call-warning.md b/content/warnings/invalid-hook-call-warning.md deleted file mode 100644 index 176c7b2a..00000000 --- a/content/warnings/invalid-hook-call-warning.md +++ /dev/null @@ -1,121 +0,0 @@ ---- -title: Invalid Hook Call Warning -layout: single -permalink: warnings/invalid-hook-call-warning.html ---- - - You are probably here because you got the following error message: - - > Hooks can only be called inside the body of a function component. - -There are three common reasons you might be seeing it: - -1. You might have **mismatching versions** of React and React DOM. -2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**. -3. You might have **more than one copy of React** in the same app. - -Let's look at each of these cases. - -## Mismatching Versions of React and React DOM - -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). - -## Breaking the Rules of Hooks - -You can only call Hooks **while React is rendering a function component**: - -* βœ… Call them at the top level in the body of a function component. -* βœ… Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html). - -**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).** - -To avoid confusion, it’s **not** supported to call Hooks in other cases: - -* πŸ”΄ Do not call Hooks in class components. -* πŸ”΄ Do not call in event handlers. -* πŸ”΄ Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`. - -If you break these rules, you might see this error. - -```js{2-3,8-9,15-16,23-24,33-34} -function Counter() { - // βœ… Good: top-level in a function component - const [count, setCount] = useState(0); - // ... -} - -function useWindowWidth() { - // βœ… Good: top-level in a custom Hook - const [width, setWidth] = useState(window.innerWidth); - // ... -} - -function Bad1() { - function handleClick() { - // πŸ”΄ Bad: inside an event handler (to fix, move it outside!) - const theme = useContext(ThemeContext); - } - // ... -} - -function Bad2() { - const style = useMemo(() => { - // πŸ”΄ Bad: inside useMemo (to fix, move it outside!) - const theme = useContext(ThemeContext); - return createStyle(theme); - }); - // ... -} - - -class Bad3 extends React.Component { - render() { - // πŸ”΄ Bad: inside a class component - useEffect(() => {}) - // ... - } -} -``` - -You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes. - ->Note -> ->[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. - - -## Duplicate React - -In order for Hooks to work, `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package. - -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. - -If you use Node for package management, you can run this check in your project folder: - - npm ls react - -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 such a library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround. - -You can also try to debug this problem by adding some logs and restarting your development server: - -```js -// Add this in node_modules/react-dom/index.js -window.React1 = require('react'); - -// Add this in your component file -require('react-dom'); -window.React2 = require('react'); -console.log(window.React1 === window.React2); -``` - -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. - -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. - ->Note -> ->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 you call `ReactDOM.render()` for a component with a different `require('react')` than seen by `react-dom`. - -## Other Causes - -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.