Skip to content

Commit

Permalink
Adds missing info about changes in StrictMode related to useEffect
Browse files Browse the repository at this point in the history
  • Loading branch information
cytrowski committed May 9, 2022
1 parent 5fae61d commit c4265a9
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 0 deletions.
2 changes: 2 additions & 0 deletions content/docs/hooks-effect.md
Original file line number Diff line number Diff line change
Expand Up @@ -476,6 +476,8 @@ In the future, the second argument might get added automatically by a build-time
>
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
>
>**However, since React 18 in [`StrictMode`](/docs/strict-mode.html) the new check will automatically unmount and remount every component, whenever a component mounts for the first time.**. Meaning React will call the `useEffect` callbacks twice, even for the empty dependencies array. The `StrictMode` works only in the `development` environment - you will not observe this behavior in the `production` build. The reasoning behind this is described in the [React 18 upgrade guide](/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode).
>
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
>
>We recommend using the [`exhaustive-deps`](https://github.com/facebook/react/issues/14920) rule as part of our [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks#installation) package. It warns when dependencies are specified incorrectly and suggests a fix.
Expand Down
2 changes: 2 additions & 0 deletions content/docs/hooks-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,8 @@ Now the subscription will only be recreated when `props.source` changes.
>
>If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array (`[]`) as a second argument. This tells React that your effect doesn't depend on *any* values from props or state, so it never needs to re-run. This isn't handled as a special case -- it follows directly from how the dependencies array always works.
>
>**However, since React 18 in [`StrictMode`](/docs/strict-mode.html) the new check will automatically unmount and remount every component, whenever a component mounts for the first time.**. Meaning React will call the `useEffect` callbacks twice, even for the empty dependencies array. The `StrictMode` works only in the `development` environment - you will not observe this behavior in the `production` build. The reasoning behind this is described in the [React 18 upgrade guide](/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-strict-mode).
>
>If you pass an empty array (`[]`), the props and state inside the effect will always have their initial values. While passing `[]` as the second argument is closer to the familiar `componentDidMount` and `componentWillUnmount` mental model, there are usually [better](/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies) [solutions](/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often) to avoid re-running effects too often. Also, don't forget that React defers running `useEffect` until after the browser has painted, so doing extra work is less of a problem.
>
>
Expand Down

0 comments on commit c4265a9

Please sign in to comment.