Skip to content

Commit ce2bf4d

Browse files
authored
Update hooks.md — reselect usage with multiple instances simplified (#2110)
1 parent 8c503ef commit ce2bf4d

File tree

1 file changed

+1
-36
lines changed

1 file changed

+1
-36
lines changed

docs/api/hooks.md

+1-36
Original file line numberDiff line numberDiff line change
@@ -224,42 +224,7 @@ export const App = () => {
224224
}
225225
```
226226

227-
However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that each component instance gets its own selector instance (see [here](https://github.com/reduxjs/reselect#q-can-i-share-a-selector-across-multiple-component-instances) for a more thorough explanation of why this is necessary):
228-
229-
```jsx
230-
import React, { useMemo } from 'react'
231-
import { useSelector } from 'react-redux'
232-
import { createSelector } from 'reselect'
233-
234-
const makeSelectCompletedTodosCount = () =>
235-
createSelector(
236-
(state) => state.todos,
237-
(_, completed) => completed,
238-
(todos, completed) =>
239-
todos.filter((todo) => todo.completed === completed).length
240-
)
241-
242-
export const CompletedTodosCount = ({ completed }) => {
243-
const selectCompletedTodosCount = useMemo(makeSelectCompletedTodosCount, [])
244-
245-
const matchingCount = useSelector((state) =>
246-
selectCompletedTodosCount(state, completed)
247-
)
248-
249-
return <div>{matchingCount}</div>
250-
}
251-
252-
export const App = () => {
253-
return (
254-
<>
255-
<span>Number of done todos:</span>
256-
<CompletedTodosCount completed={true} />
257-
<span>Number of unfinished todos:</span>
258-
<CompletedTodosCount completed={false} />
259-
</>
260-
)
261-
}
262-
```
227+
However, when the selector is used in multiple component instances and depends on the component's props, you need to ensure that selector's memoization behavior is properly configured (see [here](https://reselect.js.org/faq/#can-i-share-a-selector-across-multiple-component-instances) for details).
263228

264229
### Development mode checks
265230

0 commit comments

Comments
 (0)