Skip to content

Commit

Permalink
docs(hooks.md): clarify useDispatch, see #1468 (#1598)
Browse files Browse the repository at this point in the history
  • Loading branch information
papb authored Jun 30, 2020
1 parent c581d48 commit 3da5995
Showing 1 changed file with 3 additions and 1 deletion.
4 changes: 3 additions & 1 deletion docs/api/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,8 @@ const dispatch = useDispatch()

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

*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).*

#### Examples

```jsx
Expand All @@ -239,7 +241,7 @@ export const CounterComponent = ({ value }) => {
}
```

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.
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:

```jsx
import React, { useCallback } from 'react'
Expand Down

0 comments on commit 3da5995

Please sign in to comment.