Skip to content

Invalid hook call warning #185

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Feb 22, 2020
Merged
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
14a78f0
Article has been translated.
Dec 20, 2019
bc553c3
Fixed translation.
Dec 26, 2019
48e369c
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Dec 26, 2019
c5427f8
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Dec 26, 2019
6f389cc
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Dec 26, 2019
ce0e3b8
Fix translation according to instructions.
Dec 27, 2019
455043f
Checked with yarn.
Dec 27, 2019
908dc57
Fix: test formatting has been reverted.
Jan 15, 2020
1ebc6c3
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
f59bc16
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
b2dd1f2
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
a04b819
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
e79e3fa
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
d59183c
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
d4181bf
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
4ceb448
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
9e00eb1
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
7926c19
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
ff14774
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
4b6290c
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
66dbb5d
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
80ba307
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
16f2a1f
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
fb70da0
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
ae0e2f8
Update content/warnings/invalid-hook-call-warning.md
mikhailnetkachev-halolab Feb 21, 2020
40ce122
Edited according to review.
Feb 21, 2020
ef2a421
Update content/warnings/invalid-hook-call-warning.md
vldmrkl Feb 22, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 42 additions & 42 deletions content/warnings/invalid-hook-call-warning.md
Original file line number Diff line number Diff line change
@@ -1,68 +1,68 @@
---
title: Invalid Hook Call Warning
title: "Попередження: некоректний виклик хука"
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.
> 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.
1. **Невідповідність версій** React і React DOM у вашому додатку.
2. Ви **порушили [правила хуків](/docs/hooks-rules.html)**
3. Ви маєте **більш ніж одну копію React** в одному додатку.

Let's look at each of these cases.
Розглянемо кожний з цих випадків.

## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
## Невідповідність версій React і React DOM {#mismatching-versions-of-react-and-react-dom}

You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) 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).
Можливо ви використовуєте версії `react-dom` (< 16.8.0) або `react-native` (< 0.59), які ще не підтримують хуки. Виконайте у терміналі команду `npm ls react-dom` або `npm ls react-native` у директорії вашого додатку, щоб перевірити які версії встановлено. Якщо їх виявиться більше, ніж одна, це також може становити проблему (докладніше про це далі).

## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
## Порушення правил використання хуків {#breaking-the-rules-of-hooks}

You can only call Hooks **while React is rendering a function component**:
Ви можете викликати хуки лише тоді, **коли React відображує функціональний компонент**:

* ✅ 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).
* ✅ Викликайте їх на верхньому рівні в тілі функціонального компонента.
* ✅ Викликайте їх на верхньому рівні в тілі [користувацького хука](/docs/hooks-custom.html).

**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
**Дізнайтесь більше про це в [правилах хуків](/docs/hooks-rules.html).**

```js{2-3,8-9}
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);
// ...
}
```

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`.
* 🔴 Не викликайте хуки у класових компонентах
* 🔴 Не викликайте хуки в обробниках подій
* 🔴 Не викликайте хуки всередині функцій, переданих до `useMemo`, `useReducer`, або `useEffect`.

If you break these rules, you might see this error.
Якщо ви порушуєте ці правила, то можна зіткнутися з цією помилкою.

```js{3-4,11-12,20-21}
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!)
// 🔴 Погано: всередині useMemo (щоб виправити, винесіть виклик назовні!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
Expand All @@ -71,52 +71,52 @@ function Bad2() {

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.
Ви можете використати [плагін `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) для того, щоб відловити деякі з цих помилок.

>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.
>[Користувацькі хуки](/docs/hooks-custom.html) *можуть* викликати інші хуки (у тому й полягає їх призначення). Це не викликає проблем, бо користувацькі хуки також мають викликатися лише тоді, коли відображується функціональний компонент.


## Duplicate React {#duplicate-react}
## Дублювання React {#duplicate-react}

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.
Для того, щоб хуки працювали, у вашому додатку потрібно імпортувати той самий модуль `react`, що імпортується всередині пакету `react-dom`.

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.
Якщо під час імпорту `react` ви звертаєтесь до двох різних джерел, то побачите попередження. Це станеться, коли ви **випадково матимете дві копії** пакету `react`.

If you use Node for package management, you can run this check in your project folder:
Якщо ви використовуєте Node для керування пакетами, то в корені вашого проекту можна запустити перевірку наступним чином:

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 that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
У тому випадку, якщо побачите більше ніж один пакет React, вам потрібно з'ясувати, як це трапилось, та виправити це. Наприклад, бібліотека, яку ви використовуєте, неправильно визначила `react` як залежність (а не peer-залежність). До того часу, як це буде виправлено, [вирішення Yarn](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) може стати одним з можливих тимчасових рішень.

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
// Додайте це до 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.
Якщо у консолі ви побачите `false`, це означає, що ви використовуєте дві різні копії React. [Обговорення цього питання](https://github.com/facebook/react/issues/13991) може підказати вам деякі загальні причини, з якими вже зіткнулась спільнота, та рішення.

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.
Ця проблема також може з'явитись, якщо ви використовуєте команду `npm link` чи щось подібне. У цьому разі бандлер може "побачити" два React - один у директорії додатку та другий у директорії вашої бібліотеки. Припускаючи, що папки `myapp` і `mylib` знаходяться на одному рівні, виконання команди `npm link ../myapp/node_modules/react` з `mylib` може розв'язати проблему. Це має змусити бібліотеку використовувати копію React з додатка.

>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 `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
>Взагалі, React підтримує можливість використання декількох незалежних копій на одній сторінці (наприклад, якщо їх використовують додаток і сторонній віджет). Проблемою це стає лише у тому випадку, коли в рамках однієї програми компонент імпортує одну копію React, а `react-dom` іншу.

## Other Causes {#other-causes}
## Інші причини {#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.
Якщо жодне із запропонованих рішень не спрацювало, будь ласка, залиште коментар у цьому [обговоренні](https://github.com/facebook/react/issues/13991) та ми спробуємо допомогти. Також спробуйте зробити невеликий приклад, здатний відтворити проблему у тому вигляді, у якому ви з нею зіткнулись.