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"?