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
@@ -272,7 +273,7 @@ These checks were first added in v8.1.0
272
273
273
274
In development, the provided selector function is run an extra time with the same parameter during the first call to `useSelector`, and warns in the console if the selector returns a different result (based on the `equalityFn` provided).
274
275
275
-
This is important, as a selector returning that returns a different result reference with the same parameter will cause unnecessary rerenders.
276
+
This is important, as **a selector that returns a different result reference when called again with the same inputs will cause unnecessary rerenders**.
276
277
277
278
```ts
278
279
// this selector will return a new object reference whenever called,
@@ -302,28 +303,19 @@ function Component() {
302
303
}
303
304
```
304
305
305
-
### Comparisons with `connect`
306
-
307
-
There are some differences between the selectors passed to `useSelector()` and a `mapState` function:
308
-
309
-
- The selector may return any value as a result, not just an object.
310
-
- The selector normally _should_ return just a single value, and not an object. If you do return an object or an array, be sure to use a memoized selector to avoid unnecessary re-renders.
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
-
- You can use the `equalityFn` option to customize the comparison behavior
313
-
314
306
#### No-op selector check
315
307
316
308
In development, a check is conducted on the result returned by the selector. It warns in the console if the result is the same as the parameter passed in, i.e. the root state.
317
309
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 be as granular as possible.
310
+
**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 be as granular as possible, like `state => state.some.nested.field`.
319
311
320
312
```ts no-transpile
321
313
// BAD: this selector returns the entire state, meaning that the component will rerender unnecessarily
322
314
const { count, user } =useSelector((state) =>state)
323
315
324
316
// GOOD: instead, select only the state you need, calling useSelector as many times as needed
const user =useSelector((state) =>state.auth.currentUser)
327
319
```
328
320
329
321
By default, this will only happen when the selector is first called. You can configure the check in the Provider or at each `useSelector` call.
@@ -343,9 +335,14 @@ function Component() {
343
335
}
344
336
```
345
337
346
-
:::info
347
-
This check is disabled for production environments.
348
-
:::
338
+
### Comparisons with `connect`
339
+
340
+
There are some differences between the selectors passed to `useSelector()` and a `mapState` function:
341
+
342
+
- The selector may return any value as a result, not just an object.
343
+
- The selector normally _should_ return just a single value, and not an object. If you do return an object or an array, be sure to use a memoized selector to avoid unnecessary re-renders.
344
+
- 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.
345
+
- You can use the `equalityFn` option to customize the comparison behavior
0 commit comments