Skip to content

Commit e0097f5

Browse files
authored
docs(hooks.md): clarify useDispatch, see #1468 (#1605)
1 parent 4cdce5b commit e0097f5

File tree

2 files changed

+6
-2
lines changed

2 files changed

+6
-2
lines changed

website/versioned_docs/version-7.1/api/hooks.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,6 +218,8 @@ const dispatch = useDispatch()
218218

219219
This hook returns a reference to the `dispatch` function from the Redux store. You may use it to dispatch actions as needed.
220220

221+
*Note: like in [React's `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer), the returned `dispatch` function identity is stable and won't change on re-renders (unless you change the `store` being passed to the `<Provider>`, which would be extremely unusual).*
222+
221223
#### Examples
222224

223225
```jsx
@@ -238,7 +240,7 @@ export const CounterComponent = ({ value }) => {
238240
}
239241
```
240242

241-
When passing a callback using `dispatch` to a child component, it is recommended to memoize it with `useCallback`, since otherwise child components may render unnecessarily due to the changed reference.
243+
Reminder: when passing a callback using `dispatch` to a child component, you should memoize it with [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback), just like you should memoize any passed callback. This avoids unnecesarry rendering of child components due to the changed callback reference. You can safely pass `[dispatch]` in the dependency array for the `useCallback` call - since `dispatch` won't change, the callback will be reused properly (as it should). For example:
242244

243245
```jsx
244246
import React, { useCallback } from 'react'

website/versioned_docs/version-7.2/api/hooks.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -220,6 +220,8 @@ const dispatch = useDispatch()
220220

221221
This hook returns a reference to the `dispatch` function from the Redux store. You may use it to dispatch actions as needed.
222222

223+
*Note: like in [React's `useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer), the returned `dispatch` function identity is stable and won't change on re-renders (unless you change the `store` being passed to the `<Provider>`, which would be extremely unusual).*
224+
223225
#### Examples
224226

225227
```jsx
@@ -240,7 +242,7 @@ export const CounterComponent = ({ value }) => {
240242
}
241243
```
242244

243-
When passing a callback using `dispatch` to a child component, it is recommended to memoize it with `useCallback`, since otherwise child components may render unnecessarily due to the changed reference.
245+
Reminder: when passing a callback using `dispatch` to a child component, you should memoize it with [`useCallback`](https://reactjs.org/docs/hooks-reference.html#usecallback), just like you should memoize any passed callback. This avoids unnecesarry rendering of child components due to the changed callback reference. You can safely pass `[dispatch]` in the dependency array for the `useCallback` call - since `dispatch` won't change, the callback will be reused properly (as it should). For example:
244246

245247
```jsx
246248
import React, { useCallback } from 'react'

0 commit comments

Comments
 (0)