How to disable warning "react-hooks/exhaustive-deps" in a custom-hooks

Viewed 904
function SomeHooksOne() {
  const [state, setState] = useCustomState();
  
  useEffect(() => {
    setState('SOME_VALUE');
  }, []); // The warning is occurred here.
}

function useCustomState() {
  const [state, setState] = useState('');
  return [state, setState] as [string, Dispatch<SetStateAction<string>>];
}

ESLint: React Hook useEffect has a missing dependency: 'setState'. Either include it or remove the dependency array.(react-hooks/exhaustive-deps)

function SomeHooksOne() {
  const [state, setState] = useState('');
  
  useEffect(() => {
    setState('SOME_VALUE');
  }, []); // But the warning is not occurred here.
}

I'm a React Developer. I fully understand this kind of warning. I just wanted to disable the warning about this variable when I created a variable that does not change its reference value.

For example,

function useSomeEffectOne() {
  const [state, setState] = useCustomState();
  
  useEffect(() => {
    setState('SOME_VALUE');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

function useSomeEffectTwo() {
  const [state, setState] = useCustomState();
  
  useEffect(() => {
    setState('SOME_VALUE');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

function useSomeEffectThree() {
  const [state, setState] = useCustomState();
  
  useEffect(() => {
    setState('SOME_VALUE');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
}

function useCustomState() {
  const [state, setState] = useState('');
  return [state, setState] as [string, Dispatch<SetStateAction<string>>];
}

How can I disable the warning for the setState() returned by the useCustomState() without using "eslint-disable-next-line react-hooks/exhustive-deps"?

0 Answers
Related