How to fix The dependency list of this hook is missing entries in React

Line 12:6:  React Hook useEffect has a missing dependency: 'userId'. 
Either include it or remove the dependency array  react-hooks/exhaustive-deps

// BEFORE - ESLint warning
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, []); // Missing userId dependency
  
  return <div>{user?.name}</div>;
}

// AFTER - Fixed
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // userId added to dependencies
  
  return <div>{user?.name}</div>;
}

// BEFORE - Function recreated every render
function SearchComponent({ apiEndpoint }) {
  const [results, setResults] = useState([]);
  
  const searchItems = (query) => {
    fetch(apiEndpoint + query).then(r => r.json()).then(setResults);
  };
  
  useEffect(() => {
    searchItems("default");
  }, [searchItems]); // searchItems changes every render - infinite loop!
  
  return <div>{results.length} results</div>;
}

// AFTER - Function memoized with useCallback
function SearchComponent({ apiEndpoint }) {
  const [results, setResults] = useState([]);
  
  const searchItems = useCallback((query) => {
    fetch(apiEndpoint + query).then(r => r.json()).then(setResults);
  }, [apiEndpoint]); // Only recreate when apiEndpoint changes
  
  useEffect(() => {
    searchItems("default");
  }, [searchItems]); // Safe - searchItems reference is stable
  
  return <div>{results.length} results</div>;
}

// BEFORE - External variable requires dependency
function Timer() {
  const [seconds, setSeconds] = useState(0);
  const interval = 1000;
  
  useEffect(() => {
    const timer = setInterval(() => {
      setSeconds(s => s + 1);
    }, interval);
    return () => clearInterval(timer);
  }, [interval]); // interval dependency required
  
  return <div>{seconds}s</div>;
}

// AFTER - Constant moved inside effect
function Timer() {
  const [seconds, setSeconds] = useState(0);
  
  useEffect(() => {
    const interval = 1000; // Moved inside
    const timer = setInterval(() => {
      setSeconds(s => s + 1);
    }, interval);
    return () => clearInterval(timer);
  }, []); // No dependencies needed
  
  return <div>{seconds}s</div>;
}

// BEFORE - count is a dependency
function Counter({ increment }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + increment); // Uses current count
    }, 1000);
    return () => clearInterval(timer);
  }, [count, increment]); // count causes effect to restart constantly
  
  return <div>{count}</div>;
}

// AFTER - Functional update removes count dependency
function Counter({ increment }) {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    const timer = setInterval(() => {
      setCount(prev => prev + increment); // Uses previous value
    }, 1000);
    return () => clearInterval(timer);
  }, [increment]); // Only increment needed as dependency
  
  return <div>{count}</div>;
}

// BEFORE - Function inside component
function DataTable({ data }) {
  const formatDate = (date) => new Date(date).toLocaleDateString();
  
  const formattedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      date: formatDate(item.date)
    }));
  }, [data, formatDate]); // formatDate is a dependency
  
  return <table>{/* render formattedData */}</table>;
}

// AFTER - Function extracted outside
const formatDate = (date) => new Date(date).toLocaleDateString();

function DataTable({ data }) {
  const formattedData = useMemo(() => {
    return data.map(item => ({
      ...item,
      date: formatDate(item.date)
    }));
  }, [data]); // formatDate not needed - it's stable
  
  return <table>{/* render formattedData */}</table>;
}

// BEFORE - Depends on entire user object
function UserGreeting({ user }) {
  useEffect(() => {
    console.log(`Hello ${user.name}`);
  }, [user]); // Re-runs when any user property changes
  
  return <div>Welcome {user.name}</div>;
}

// AFTER - Depends only on name property
function UserGreeting({ user }) {
  const { name } = user;
  
  useEffect(() => {
    console.log(`Hello ${name}`);
  }, [name]); // Only re-runs when name changes
  
  return <div>Welcome {name}</div>;
}

function AnalyticsTracker() {
  useEffect(() => {
    // This should only run once on mount to initialize analytics
    initializeAnalytics();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // Intentionally empty - we want this to run only once
  
  return null;
}