Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Matt Sutkowski <msutkowski@gmail.com>
  • Loading branch information
2 people authored and markerikson committed Jun 13, 2023
1 parent 40b8382 commit 94c09f4
Show file tree
Hide file tree
Showing 4 changed files with 8 additions and 8 deletions.
10 changes: 5 additions & 5 deletions docs/api/hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -313,20 +313,20 @@ There are some differences between the selectors passed to `useSelector()` and a

#### No-op selector check

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

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

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

// instead, select only the state you need, calling useSelector as many times as needed
// GOOD: instead, select only the state you need, calling useSelector as many times as needed
const count = useSelector((state) => state.count)
const user = useSelector((state) => state.user)
```

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

```tsx title="Global setting via context"
<Provider store={store} noopCheck="always">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Context.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { createContext } from 'react'
import type { Context } from 'react'
import type { Action, AnyAction, Store } from 'redux'
import type { Subscription } from '../utils/Subscription'
import { CheckFrequency } from '../hooks/useSelector'
import type { CheckFrequency } from '../hooks/useSelector'

export interface ReactReduxContextValue<
SS = any,
Expand Down
2 changes: 1 addition & 1 deletion src/components/Provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { ReactReduxContext, ReactReduxContextValue } from './Context'
import { createSubscription } from '../utils/Subscription'
import { useIsomorphicLayoutEffect } from '../utils/useIsomorphicLayoutEffect'
import { Action, AnyAction, Store } from 'redux'
import { CheckFrequency } from '../hooks/useSelector'
import type { CheckFrequency } from '../hooks/useSelector'

export interface ProviderProps<A extends Action = AnyAction, S = unknown> {
/**
Expand Down
2 changes: 1 addition & 1 deletion test/hooks/useSelector.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import type {
} from '../../src/index'
import type { FunctionComponent, DispatchWithoutAction, ReactNode } from 'react'
import type { Store, AnyAction } from 'redux'
import { UseSelectorOptions } from '../../src/hooks/useSelector'
import type { UseSelectorOptions } from '../../src/hooks/useSelector'

// disable checks by default
function ProviderMock<A extends Action<any> = AnyAction, S = unknown>({
Expand Down

0 comments on commit 94c09f4

Please sign in to comment.