How to fix Warning: useEffect received a final argument that is not an array (instead, received `[type]`). When specified, the final argument must be an array. in React

// Wrong - passing a number
useEffect(() => {
  console.log('Effect runs');
}, 0);

// Wrong - passing a boolean
useEffect(() => {
  fetchData();
}, true);

// Wrong - passing single value without array
useEffect(() => {
  updateTitle();
}, count);

// Correct - empty array (runs once on mount)
useEffect(() => {
  console.log('Effect runs once');
}, []);

// Correct - single dependency in array
useEffect(() => {
  updateTitle();
}, [count]);

// Correct - multiple dependencies in array
useEffect(() => {
  fetchData();
}, [userId, searchTerm]);

// Correct - no second argument (runs on every render)
useEffect(() => {
  console.log('Runs on every render');
});

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [theme, setTheme] = useState('light');

  // Include ALL variables used inside the effect
  useEffect(() => {
    fetchUser(userId).then(data => {
      setUser(data);
      applyTheme(theme);
    });
  }, [userId, theme]); // Both userId and theme must be listed

  return <div>{user?.name}</div>;
}

npm install eslint-plugin-react-hooks --save-dev

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

function SearchComponent({ config }) {
  const [results, setResults] = useState([]);

  // Wrong - config object changes reference every render
  useEffect(() => {
    search(config).then(setResults);
  }, [config]); // This will run on every render

  // Better - memoize the config object
  const memoizedConfig = useMemo(() => config, [
    config.query,
    config.limit,
    config.filters
  ]);

  useEffect(() => {
    search(memoizedConfig).then(setResults);
  }, [memoizedConfig]);

  // Or extract primitive values
  const { query, limit } = config;
  useEffect(() => {
    search({ query, limit }).then(setResults);
  }, [query, limit]); // Use primitives directly
}

npm run dev
# or
npm start

# Search for useEffect usage
grep -r "useEffect" src/

# Use your IDE's search to find all occurrences