How to fix useContext cannot be called with multiple arguments in React

// ❌ Wrong - multiple arguments
const value = useContext(MyContext, defaultValue);
const value = useContext(MyContext, someOtherValue);
const value = useContext(MyContext, [dependencies]);

// ✅ Correct - single argument
const value = useContext(MyContext);

// Set default when creating context, not when using it
const MyContext = createContext(defaultValue); // ✅ Correct place for default

// Not here:
const value = useContext(MyContext, defaultValue); // ❌ Wrong

// useContext doesn't have dependencies
// If you need to recompute based on dependencies, use useMemo:
const contextValue = useContext(MyContext);
const computedValue = useMemo(() => {
  return transform(contextValue, dependency);
}, [contextValue, dependency]); // ✅ useMemo has dependencies

// contexts/MyContext.js
import { createContext } from 'react';

export const MyContext = createContext(defaultValue);
// or without default:
export const MyContext = createContext();

// Component.js
import { MyContext } from './contexts/MyContext';
import { useContext } from 'react';

function MyComponent() {
  const value = useContext(MyContext); // ✅ Single argument
  return <div>{value}</div>;
}

// ❌ Wrong - importing createContext and useContext from different places
import { createContext } from 'react';
import { useContext } from 'some-other-library'; // Should be from 'react'

// ❌ Wrong - importing the wrong thing
import { MyContext } from './MyContext';
const value = useContext(MyContext.Provider); // Should be MyContext, not MyContext.Provider

// ❌ Extra comma creates two arguments
const value = useContext(MyContext, ); // Trailing comma

// ❌ Parentheses in wrong place
const value = useContext((MyContext)); // Still one argument, but check for nested issues

// ❌ Array or object literal as argument
const value = useContext([MyContext]); // Array with one element
const value = useContext({ context: MyContext }); // Object with one property

// ❌ Function call that returns multiple values
const value = useContext(getContext()); // If getContext() returns array

// ✅ Clean single argument
const value = useContext(MyContext);

import { ThemeContext, UserContext, SettingsContext } from './contexts';

function MyComponent() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  const settings = useContext(SettingsContext);

  // Now you have all three values
  return (
    <div style={{ color: theme.primaryColor }}>
      Hello, {user.name}!
    </div>
  );
}

function useAppContexts() {
  const theme = useContext(ThemeContext);
  const user = useContext(UserContext);
  const settings = useContext(SettingsContext);

  return { theme, user, settings };
}

function MyComponent() {
  const { theme, user, settings } = useAppContexts();
  // Single hook call, but internally uses multiple useContext calls
}

// ❌ What you might be tempted to do
const value = useContext(MyContext, extraData); // Not possible

// ✅ Combine values in Provider
function CombinedProvider({ children, extraData }) {
  const baseValue = useContext(BaseContext); // Get from another context

  const combinedValue = {
    ...baseValue,
    extraData,
    // Add computed properties
    computed: calculateSomething(baseValue, extraData)
  };

  return (
    <MyContext.Provider value={combinedValue}>
      {children}
    </MyContext.Provider>
  );
}

// Usage
function MyComponent() {
  const { baseValue, extraData, computed } = useContext(MyContext); // ✅ Single argument
}

// Simple test component
function TestComponent() {
  const value = useContext(MyContext); // Should work with single argument

  console.log('Context value:', value);

  return (
    <div>
      <p>Context is working!</p>
      <pre>{JSON.stringify(value, null, 2)}</pre>
    </div>
  );
}

// Wrap with Provider in your app
<MyContext.Provider value={{ test: 'data' }}>
  <TestComponent />
</MyContext.Provider>