You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/hooks.md
+36Lines changed: 36 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -311,6 +311,42 @@ There are some differences between the selectors passed to `useSelector()` and a
311
311
- 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.
312
312
- You can use the `equalityFn` option to customize the comparison behavior
313
313
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.
0 commit comments