Theo's Typesafe Cult•2mo ago

React UseState interface and eslint - am I doing this right?

eslint no-unused-vars rule is failing on the variables in the interfaces for my react components. I have n-number of components and I manage their state from the parent component, so I declare an interface in the component and pass the useState from the parent component to the child component using props. Each component starts with an interface declaration like so

interface createCategoryModalProps {
  showCreateCategoryModal: boolean;
  setShowCreateCategoryModal: (show: boolean) => void;
  parentCategory: number;
}

interface createCategoryModalProps {
  showCreateCategoryModal: boolean;
  setShowCreateCategoryModal: (show: boolean) => void;
  parentCategory: number;
}

And the component renders itself conditionally based on the value of showCreateCategoryModal. eslint no-unused-vars is failing for the variable show in the interface declaration because it is never used. The setShowCreateCategoryModal gets assigned to the values coming from the parent component defining

const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);

const [showCreateCategoryModal, setShowCreateCategoryModal] = useState(false);

This means that the modal is hidden by default until setShowCreateCategoryModal(true) is called. Is the right approach here to add a rule to eslint config that disables checking arguments starting with an underscore and adding an underscore to the show variable name? Or am I doing react wrong? FWIW I am running pnpx next lint to run eslint

2 Replies

4zOP•2mo ago

To fill in the last missing code for this example I gave, this is the child component defined in the parent page

<CreateCategoryModal
              showCreateCategoryModal={showCreateCategoryModal}
              setShowCreateCategoryModal={setShowCreateCategoryModal}
              parentCategory={currentCategoryId}
            />

<CreateCategoryModal
              showCreateCategoryModal={showCreateCategoryModal}
              setShowCreateCategoryModal={setShowCreateCategoryModal}
              parentCategory={currentCategoryId}
            />

I hope my example code has been clear and you could understand it easily.

Jotas•2mo ago

you need to use the typescript specific rule as if eslint-no-unused-vars is "thinking" that your type definition is literally a runtime function Maybe you could set up your rules like this:

rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        args: 'all',
        argsIgnorePattern: '^_',
        caughtErrors: 'all',
        caughtErrorsIgnorePattern: '^_',
        destructuredArrayIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        ignoreRestSiblings: true,
      },
    ],
  }

rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        args: 'all',
        argsIgnorePattern: '^_',
        caughtErrors: 'all',
        caughtErrorsIgnorePattern: '^_',
        destructuredArrayIgnorePattern: '^_',
        varsIgnorePattern: '^_',
        ignoreRestSiblings: true,
      },
    ],
  }

notice i disabled no-unused-vars and enabled @typescript-eslint no-unused-vars with a bunch of relevant rules to ignore underscore (if you want that)

Gaming

Programming

React UseState interface and eslint - am I doing this right?