useSelector-prefer-selectors.md

Enforces that all useSelector hooks use named selector functions. (react-redux/useSelector-prefer-selectors)

Using selectors in useSelector to pull data from the store or compute derived data allows you to decouple your containers from the state architecture and more easily enable memoization. This rule will ensure that every hook utilizes a named selector.

Rule details

The following pattern is considered incorrect:

const property = useSelector((state) => state.property)
const property = useSelector(function (state) { return state.property })

The following patterns are considered correct:

const selector = (state) => state.property

function Component() {
  const property = useSelector(selector)
  // ...
}

Rule Options

...
"react-redux/useSelector-prefer-selectors": [<enabled>, {
  "matching": <string>
  "validateParams": <boolean>
}]
...

matching

If provided, validates the name of the selector functions against the RegExp pattern provided.

    // .eslintrc
    {
        "react-redux/useSelector-prefer-selectors": ["error", { matching: "^.*Selector$"}]
    }

    // container.js
    const propertyA = useSelector(aSelector) // success
    const propertyB = useSelector(selectB) // failure

    // .eslintrc
    {
        "react-redux/useSelector-prefer-selectors": ["error", { matching: "^get.*FromState$"}]
    }

    // container.js
    const propertyA = useSelector(getAFromState) // success
    const propertyB = useSelector(getB) // failure

hook

Sets the name of the useSelector function to target. The value can also be an array of strings. Defaults to ['useSelector', 'useAppSelector'].

    // .eslintrc
{
    "react-redux/useSelector-prefer-selectors": ["error", { hook: 'useAppSelector' }]
}

// container.js
const property = useAppSelector(state => state.mydata) // failure