React перехватывает функциональное обновление, вызывает ошибку eslint no-shadow

Question

Я использую React useEffect для обновления состояния. Эслинт предупреждает, что я делаю ошибку без тени. Я думаю, что это связано с некоторыми настройками плагина eslint или eslint, потому что CRA не вызывает ту же ошибку. Как это исправить?

function Sample(props) {
  const { flag } = props;
  const [value, setValue] = useState();

  useEffect(() => {
    if (flag) {
      setValue(value => value + 1);
    }
  }, [flag]);
}

Здесь setValue(value => value + 1); значение не вызывает тени из-за объявленного на useState.

Answer 1

eslint правильно жалуется, потому что вы объявили value переменную в вашем useState хуке, но затем вы повторно объявляете другую переменную с именем value в вашем useEffect хуке .

Самое простое решение - не скрывать имя переменной, меняя переменную в вашем вызове setValue -

useEffect(() => {
  if (flag) {
    setValue(prev => prev + 1);
  }
}, [flag]);