How to fix React Hook useCallback has a missing dependency. Either include it or remove the dependency array in React

// Before: Missing dependency warning
const handleClick = useCallback(() => {
  console.log(userId); // userId not in dependencies
}, []);

// After: Include the missing dependency
const handleClick = useCallback(() => {
  console.log(userId);
}, [userId]); // Now callback updates when userId changes

// Before: Helper function causes dependency issues
function processData(value: string) {
  return value + userId; // References userId from component scope
}

const handleSubmit = useCallback(() => {
  const result = processData(input);
  // ...
}, [input]); // Missing userId dependency

// After: Move function inside callback
const handleSubmit = useCallback(() => {
  function processData(value: string) {
    return value + userId; // Now clearly requires userId
  }
  const result = processData(input);
  // ...
}, [input, userId]); // All dependencies explicit

// Before: State in dependencies
const increment = useCallback(() => {
  setCount(count + 1); // References current count
}, [count]); // Callback recreated every time count changes

// After: Functional update removes dependency
const increment = useCallback(() => {
  setCount(prev => prev + 1); // No reference to count
}, []); // Stable callback, never recreated

// Before: Object recreated every render
const config = { apiKey, timeout: 5000 };
const fetchData = useCallback(() => {
  api.fetch(config); // config is a new object every time
}, [config]); // Callback recreates on every render

// After: Memoize the object
const config = useMemo(() => ({
  apiKey,
  timeout: 5000
}), [apiKey]);

const fetchData = useCallback(() => {
  api.fetch(config);
}, [config]); // Now only recreates when apiKey changes

// Before: Constant in component scope
function MyComponent() {
  const API_ENDPOINT = 'https://api.example.com';

  const fetchData = useCallback(() => {
    fetch(API_ENDPOINT); // ESLint wants this as dependency
  }, []); // Warning about missing API_ENDPOINT
}

// After: Move constant outside
const API_ENDPOINT = 'https://api.example.com';

function MyComponent() {
  const fetchData = useCallback(() => {
    fetch(API_ENDPOINT); // No longer a dependency
  }, []); // No warning
}

// Before: Callback recreates on every analytics change
const handleClick = useCallback(() => {
  analytics.track('click', { userId });
}, [userId, analytics]); // Analytics object changes frequently

// After: Store analytics in ref
const analyticsRef = useRef(analytics);
analyticsRef.current = analytics; // Keep ref updated

const handleClick = useCallback(() => {
  analyticsRef.current.track('click', { userId });
}, [userId]); // Callback only recreates when userId changes

const handleMount = useCallback(() => {
  // This should only run once on mount, not when userId changes
  initializeComponent(userId);
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []); // Intentionally empty despite using userId