diff --git a/docs/api/hooks.md b/docs/api/hooks.md index 42e448df8..9564713d7 100644 --- a/docs/api/hooks.md +++ b/docs/api/hooks.md @@ -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" diff --git a/src/components/Context.ts b/src/components/Context.ts index a0b5cab09..8454e09f1 100644 --- a/src/components/Context.ts +++ b/src/components/Context.ts @@ -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, diff --git a/src/components/Provider.tsx b/src/components/Provider.tsx index a11eaf55d..4ce5d5b54 100644 --- a/src/components/Provider.tsx +++ b/src/components/Provider.tsx @@ -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 { /** diff --git a/test/hooks/useSelector.spec.tsx b/test/hooks/useSelector.spec.tsx index 500aded64..39d7d5a50 100644 --- a/test/hooks/useSelector.spec.tsx +++ b/test/hooks/useSelector.spec.tsx @@ -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 = AnyAction, S = unknown>({