Skip to content

Commit 21305fe

Browse files
authored
docs(hooks.md): clarify useDispatch, see reduxjs#1468 (reduxjs#1598)
1 parent 790bc70 commit 21305fe

File tree

1 file changed

+3
-1
lines changed

1 file changed

+3
-1
lines changed

docs/api/hooks.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,8 @@ const dispatch = useDispatch()
219219

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

222+
*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).*
223+
222224
#### Examples
223225

224226
```jsx
@@ -239,7 +241,7 @@ export const CounterComponent = ({ value }) => {
239241
}
240242
```
241243

242-
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.
244+
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:
243245

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

0 commit comments

Comments
 (0)