Skip to content

Commit f9a0de3

Browse files
committed
Update hooks docs with check details
1 parent b5f7ec9 commit f9a0de3

File tree

1 file changed

+15
-18
lines changed

1 file changed

+15
-18
lines changed

docs/api/hooks.md

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,12 @@ From there, you may import any of the listed React Redux hooks APIs and use them
4848
type RootState = ReturnType<typeof store.getState>
4949
type SelectorFn = <Selected>(state: RootState) => Selected
5050
type EqualityFn = (a: any, b: any) => boolean
51-
export type StabilityCheck = 'never' | 'once' | 'always'
51+
export type CheckFrequency = 'never' | 'once' | 'always'
5252

5353
interface UseSelectorOptions {
5454
equalityFn?: EqualityFn
55-
stabilityCheck?: StabilityCheck
55+
stabilityCheck?: CheckFrequency
56+
noopCheck?: CheckFrequency
5657
}
5758

5859
const result: Selected = useSelector(
@@ -272,7 +273,7 @@ These checks were first added in v8.1.0
272273

273274
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).
274275

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

277278
```ts
278279
// this selector will return a new object reference whenever called,
@@ -302,28 +303,19 @@ function Component() {
302303
}
303304
```
304305

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-
314306
#### No-op selector check
315307

316308
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.
317309

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`.
319311

320312
```ts no-transpile
321313
// BAD: this selector returns the entire state, meaning that the component will rerender unnecessarily
322314
const { count, user } = useSelector((state) => state)
323315

324316
// GOOD: 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)
317+
const count = useSelector((state) => state.count.value)
318+
const user = useSelector((state) => state.auth.currentUser)
327319
```
328320

329321
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() {
343335
}
344336
```
345337

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
349346

350347
## `useDispatch()`
351348

0 commit comments

Comments
 (0)