通过传递一个空数组作为第二个参数，使用“useEffect”钩子只运行一次代码，但是 ESLint 抱怨空数组

Question

I am developing a react-native project on Visual Studio Code IDE.

For some reason, my Visual Studio Code starts to automatically fill code to solve lint errors.

For example, I use useEffect hook to run some code only once (so I need to pass an empty array as the 2nd parameter of useEffect ). Code is like below:

useEffect(() => {
     ...
      // imaging my code here has 'foo', 'bar', etc variables
     ...
     ...
    return () => {
      console.log('Screen did unmount');
    };
  }, []); // ESLint complains the empty array.

The ESLint complains that empty array like immediately after I typed above code:

React Hook useEffect has missing dependencies: 'foo', 'bar'. Either include them or remove the dependency array.eslint(react-hooks/exhaustive-deps)

If I now ctrl+s to save my code. Visual Studio automatically adding code to the empty array:

useEffect(() => {
     ...
      // imaging my code here has 'foo', 'bar', etc variables
     ...
     ...
    return () => {
      console.log('Screen did unmount');
    };
  }, [foo, bar]); 

My two questions:

1. According to the way how the useEffect hook works, in order to run the code only once, I have to pass an empty array. Why ESLint complains about that? What is the right way to have the code inside useEffect to only run once if mine is not recommended?

2. How to make my Visual Studio Code stop automatically adding code to resolve ESLint error?

Answer 1

I suggest two methods for this.

You can use // eslint-disable-next-line in your code

useEffect(() => {
    ...
    // imaging my code here has 'foo', 'bar', etc variables
    ...
    ...
    return () => {
        console.log('Screen did unmount');
    };
    // eslint-disable-next-line
}, [])

Or you can remove edit the settings of eslint of Visual Studio code.

Visual Studio settings

Cheers.