react/hook-use-state

📝 Ensure destructuring and symmetric naming of useState hook value and setter variables.

💡 This rule is manually fixable by editor suggestions.

💡 This rule provides editor suggestions.

Rule Details

This rule checks whether the value and setter variables destructured from a React.useState() call are named symmetrically.

Examples of incorrect code for this rule:

import React from 'react';
export default function useColor() {
  // useState call is not destructured into value + setter pair
  const useStateResult = React.useState();
  return useStateResult;
}

import React from 'react';
export default function useColor() {
  // useState call is destructured into value + setter pair, but identifier
  // names do not follow the [thing, setThing] naming convention
  const [color, updateColor] = React.useState();
  return [color, updateColor];
}

Examples of correct code for this rule:

import React from 'react';
export default function useColor() {
  // useState call is destructured into value + setter pair whose identifiers
  // follow the [thing, setThing] naming convention
  const [color, setColor] = React.useState();
  return [color, setColor];
}

import React from 'react';
export default function useColor() {
  // useState result is directly returned
  return React.useState();
}

Rule Options

...
"react/hook-use-state": [<enabled>, { "allowDestructuredState": <boolean> }]
...

allowDestructuredState

When true the rule will ignore the name of the destructured value.

Examples of correct code for this rule, when configured with { "allowDestructuredState": true }:

import React from 'react';
const [{foo, bar, baz}, setFooBarBaz] = React.useState({foo: "bbb", bar: "aaa", baz: "qqq"})