How to fix React Hook useState has been changed from being called conditionally in React

// ❌ WRONG - useState moved inside condition
function MyComponent({ shouldUseState }) {
  let state, setState;
  
  if (shouldUseState) {
    // This hook is now conditional - was it unconditional before?
    [state, setState] = useState(0);
  }
  
  return <div>{state}</div>;
}

// Check your git history or recent changes to see if this hook
// was previously called unconditionally at the top level.

// ❌ WRONG - Hook inside condition
function MyComponent({ condition }) {
  if (condition) {
    return <div>Early return</div>;
  }
  
  const [state, setState] = useState(0); // Hook after early return
  return <div>{state}</div>;
}

// ❌ WRONG - Hook in conditional block
function MyComponent({ shouldUse }) {
  if (shouldUse) {
    const [state, setState] = useState(0); // Conditional hook
    return <div>{state}</div>;
  }
  return <div>No state</div>;
}

// ✅ CORRECT - All hooks at top level
function MyComponent({ condition, shouldUse }) {
  // All hooks called unconditionally first
  const [state, setState] = useState(0);
  
  if (condition) {
    return <div>Early return with {state}</div>;
  }
  
  if (shouldUse) {
    return <div>{state}</div>;
  }
  
  return <div>No state display</div>;
}

// ❌ WRONG - Conditional hook based on prop
function MyComponent({ enabled }) {
  if (enabled) {
    const [value, setValue] = useState(''); // Conditional
  }
  // ...
}

// ✅ CORRECT - Unconditional hook, conditional logic inside
function MyComponent({ enabled }) {
  const [value, setValue] = useState(''); // Always called
  
  useEffect(() => {
    if (enabled) {
      // Conditional logic inside effect
      setValue('default');
    }
  }, [enabled]);
  
  // Or conditional rendering based on the state
  return enabled ? <div>{value}</div> : <div>Disabled</div>;
}

// ✅ CORRECT - Conditional component composition
function ParentComponent({ showChild }) {
  return showChild ? <ChildWithState /> : <div>No child</div>;
}

function ChildWithState() {
  const [value, setValue] = useState(''); // Unconditional in child
  return <div>{value}</div>;
}

// ❌ WRONG - Complex conditional hook logic
function MyComponent({ mode }) {
  if (mode === 'A') {
    const [stateA, setStateA] = useState(null);
    const [dataA, setDataA] = useState([]);
    // ... A logic
  } else if (mode === 'B') {
    const [stateB, setStateB] = useState('');
    const [countB, setCountB] = useState(0);
    // ... B logic
  }
}

// ✅ CORRECT - Custom hooks with unconditional internal calls
function useModeA() {
  const [stateA, setStateA] = useState(null); // Always called
  const [dataA, setDataA] = useState([]);     // Always called
  // ... A logic
  return { stateA, dataA };
}

function useModeB() {
  const [stateB, setStateB] = useState('');   // Always called
  const [countB, setCountB] = useState(0);    // Always called
  // ... B logic
  return { stateB, countB };
}

function MyComponent({ mode }) {
  // Choose which custom hook to use, but hooks inside are unconditional
  const modeLogic = mode === 'A' ? useModeA() : useModeB();
  
  return <div>{/* render based on modeLogic */}</div>;
}

// ❌ WRONG - Hook in loop
function ItemList({ items }) {
  return items.map((item, index) => {
    const [isOpen, setIsOpen] = useState(false); // Hook in map callback
    return (
      <div key={index} onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? item.details : item.name}
      </div>
    );
  });
}

// ✅ CORRECT - Extract to component
function Item({ item }) {
  const [isOpen, setIsOpen] = useState(false); // Hook in component
  return (
    <div onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? item.details : item.name}
    </div>
  );
}

function ItemList({ items }) {
  return items.map((item, index) => (
    <Item key={index} item={item} />
  ));
}

// ❌ WRONG - Hook after conditional return
function MyComponent({ isLoading }) {
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  const [data, setData] = useState(null); // Hook after return
  // ...
}

// ✅ CORRECT - Hook before any returns
function MyComponent({ isLoading }) {
  const [data, setData] = useState(null); // Hook first
  
  if (isLoading) {
    return <div>Loading...</div>;
  }
  
  // Use data here
  return <div>{data}</div>;
}

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

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

module.exports = {
  plugins: ['react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

// Before refactoring
function Component() {
  const [name, setName] = useState('');      // Hook 1
  const [count, setCount] = useState(0);     // Hook 2
  const [active, setActive] = useState(false); // Hook 3
  // ...
}

// ❌ WRONG - Hook order changed
function Component({ mode }) {
  if (mode === 'special') {
    const [special, setSpecial] = useState(null); // New hook inserted
  }
  
  const [name, setName] = useState('');      // Now Hook 2 (was 1)
  const [count, setCount] = useState(0);     // Now Hook 3 (was 2)
  const [active, setActive] = useState(false); // Now Hook 4 (was 3)
  // ...
}

// ✅ CORRECT - Maintain original hook order
function Component({ mode }) {
  const [name, setName] = useState('');      // Still Hook 1
  const [count, setCount] = useState(0);     // Still Hook 2
  const [active, setActive] = useState(false); // Still Hook 3
  const [special, setSpecial] = useState(null); // New Hook 4 (at end)
  
  // Conditional logic using the hooks
  if (mode === 'special') {
    // Use special state
  }
  // ...
}