How to fix React Hook useEffect has a missing dependency: [context value]. Either include it or remove the dependency array. in React

import { useContext, useEffect } from 'react';
import { UserContext } from './UserContext';

function MyComponent() {
  const userContext = useContext(UserContext);

  useEffect(() => {
    if (userContext.isAuthenticated) {
      // Do something with userContext
      console.log('User:', userContext.user);
    }
  }, [userContext]); // Include the entire context

  return <div>...</div>;
}

useEffect(() => {
  if (isAuthenticated) {
    console.log('User:', user);
  }
}, [isAuthenticated, user]); // More specific dependencies

import { createContext, useMemo, useState } from 'react';

export const UserContext = createContext(null);

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  // Memoize the entire context value
  const contextValue = useMemo(() => ({
    user,
    isAuthenticated,
    setUser,
    setIsAuthenticated
  }), [user, isAuthenticated]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
}

import { createContext, useCallback, useMemo, useState } from 'react';

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  // Memoize functions
  const login = useCallback((userData) => {
    setUser(userData);
  }, []);

  const logout = useCallback(() => {
    setUser(null);
  }, []);

  const contextValue = useMemo(() => ({
    user,
    login,
    logout
  }), [user, login, logout]);

  return (
    <UserContext.Provider value={contextValue}>
      {children}
    </UserContext.Provider>
  );
}

function MyComponent() {
  const { apiUrl } = useContext(ConfigContext);

  useEffect(() => {
    // Move derived values inside
    const endpoint = `${apiUrl}/users`;

    fetch(endpoint)
      .then(res => res.json())
      .then(data => console.log(data));
  }, [apiUrl]); // Only include what actually changes
}

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

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

// Stable config context
export const ConfigContext = createContext({ apiUrl: '', theme: 'light' });

// Frequently-changing state context
export const UserStateContext = createContext({ user: null });

function MyComponent() {
  const config = useContext(ConfigContext);
  const userState = useContext(UserStateContext);

  useEffect(() => {
    // Effect only re-runs when config changes, not on every user state change
    console.log('API URL:', config.apiUrl);
  }, [config]);
}