Skip to content

Commit

Permalink
Provide quick summary of dependencies array in useEffect
Browse files Browse the repository at this point in the history
Provide a clearer, up-front explanation of the three cases for the
`dependencies` parameter in `useEffect` to reduce the need to click
through to the more in-depth explanation further down.  I often find
myself needing to follow the 'See the differences...' link just to be
reminded of which situation to provide an empty array vs no array.
Providing these details right up front streamlines that process, with
minimal impacts to the rest of the documentation.
  • Loading branch information
brianlove committed Nov 17, 2023
1 parent 4f9e9a5 commit 2c51013
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,10 @@ function ChatRoom({ roomId }) {
* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. When your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. After your component is removed from the DOM, React will run your cleanup function.
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. If you omit this argument, your Effect will re-run after every re-render of the component. [See the difference between passing an array of dependencies, an empty array, and no dependencies at all.](#examples-dependencies)
* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison. [See the difference between passing an array of dependencies, an empty array, and no dependencies at all.](#examples-dependencies)
* If **an array with values** (`[dep1, dep2]`) is provided, your Effect runs after the initial render _and_ **re-renders when listed dependencies change**.
* If **an empty array** (`[]`) is provided, your Effect runs _only_ **after the initial render**.
* If **no array** is provided, your Effect runs **after every single render and re-render** of your component.
#### Returns {/*returns*/}
Expand Down

0 comments on commit 2c51013

Please sign in to comment.