How to fix React Hook useEffect has missing dependencies: 'count'. Either include it or remove the dependency array. in React

function MyComponent({ userId, onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    // userId, onUpdate, and fetchData are dependencies
    fetchData(userId).then(result => {
      setData(result);
      onUpdate(result);
    });
  }, []); // ❌ Missing dependencies!
}

function MyComponent({ userId, onUpdate }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData(userId).then(result => {
      setData(result);
      onUpdate(result);
    });
  }, [userId, onUpdate]); // ✅ Dependencies added
}

// Before: external calculation creates dependency
function MyComponent({ user }) {
  const userName = user.firstName + ' ' + user.lastName;

  useEffect(() => {
    console.log(userName);
  }, [userName]); // userName recreated every render
}

// After: calculation inside effect
function MyComponent({ user }) {
  useEffect(() => {
    const userName = user.firstName + ' ' + user.lastName;
    console.log(userName);
  }, [user]); // Only depend on user object
}

function MyComponent({ userId }) {
  const [data, setData] = useState(null);

  // Without useCallback: function recreated every render
  const loadData = useCallback(async () => {
    const result = await fetchData(userId);
    setData(result);
  }, [userId]); // loadData only changes when userId changes

  useEffect(() => {
    loadData();
  }, [loadData]); // ✅ Safe dependency
}

// Move constants outside
const API_ENDPOINT = 'https://api.example.com';
const DEFAULT_OPTIONS = { timeout: 5000 };

function MyComponent({ userId }) {
  useEffect(() => {
    fetch(`${API_ENDPOINT}/users/${userId}`, DEFAULT_OPTIONS);
  }, [userId]); // Only userId is a dependency
}

function Counter({ increment }) {
  const [count, setCount] = useState(0);

  // Before: depends on count
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + increment);
    }, 1000);
    return () => clearInterval(timer);
  }, [count, increment]); // Resets timer every second!

  // After: no count dependency needed
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prevCount => prevCount + increment);
    }, 1000);
    return () => clearInterval(timer);
  }, [increment]); // ✅ Only increment is needed
}

# Run ESLint to check for warnings
npm run lint

# Or build the project
npm run build