Skip to content

Commit 40b8382

Browse files
EskiMojo14markerikson
authored andcommitted
update docs
1 parent 43c75e2 commit 40b8382

File tree

1 file changed

+36
-0
lines changed

1 file changed

+36
-0
lines changed

docs/api/hooks.md

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -311,6 +311,42 @@ There are some differences between the selectors passed to `useSelector()` and a
311311
- The selector function does _not_ receive an `ownProps` argument. However, props can be used through closure (see the examples above) or by using a curried selector.
312312
- You can use the `equalityFn` option to customize the comparison behavior
313313

314+
#### No-op selector check
315+
316+
In development, a check is conducted on the result returned by the selector. It warns in console if the result is the same as the parameter passed in, i.e. the root state.
317+
318+
A `useSelector` call returning the entire root state is almost always a mistake, as it means the component will rerender whenever _anything_ in state changes. Selectors should select as specifically as possible.
319+
320+
```ts no-transpile
321+
// this selector returns the entire state, meaning that the component will rerender unnecessarily
322+
const { count, user } = useSelector((state) => state)
323+
324+
// instead, select only the state you need, calling useSelector as many times as needed
325+
const count = useSelector((state) => state.count)
326+
const user = useSelector((state) => state.user)
327+
```
328+
329+
By default, this will only happen when the selector is first called. You can configure the check via context, or per `useSelector` call - either to run the check always, or never.
330+
331+
```tsx title="Global setting via context"
332+
<Provider store={store} noopCheck="always">
333+
{children}
334+
</Provider>
335+
```
336+
337+
```tsx title="Individual hook setting"
338+
function Component() {
339+
const count = useSelector(selectCount, { noopCheck: 'never' })
340+
// run once (default)
341+
const user = useSelector(selectUser, { noopCheck: 'once' })
342+
// ...
343+
}
344+
```
345+
346+
:::info
347+
This check is disabled for production environments.
348+
:::
349+
314350
## `useDispatch()`
315351

316352
```ts

0 commit comments

Comments
 (0)