How to fix Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. in React

// The error will show something like:
// Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
//   at MyComponent (MyComponent.jsx:15)

// ❌ Wrong - immediately invokes setCount, causing infinite loop
<button onClick={setCount(count + 1)}>Increment</button>

// ✅ Correct - passes a function reference
<button onClick={() => setCount(count + 1)}>Increment</button>

// ✅ Also correct - passes function reference directly
const handleClick = () => setCount(count + 1);
<button onClick={handleClick}>Increment</button>

// ❌ Wrong - setState in component body causes infinite loop
function MyComponent() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Runs on every render!
  return <div>{count}</div>;
}

// ✅ Correct - setState in useEffect with empty dependency array
function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1); // Runs only once on mount
  }, []);
  
  return <div>{count}</div>;
}

// ✅ Best - initialize state correctly
function MyComponent() {
  const [count, setCount] = useState(1); // Set initial value
  return <div>{count}</div>;
}

// ❌ Wrong - no dependency array, runs on every render
useEffect(() => {
  setData(fetchData());
});

// ✅ Correct - empty array means run once on mount
useEffect(() => {
  setData(fetchData());
}, []);

// ✅ Correct - runs when specific dependencies change
useEffect(() => {
  setData(fetchData(userId));
}, [userId]);

// ❌ Wrong - new object created on every render
function MyComponent() {
  const options = { limit: 10, sort: 'asc' };
  
  useEffect(() => {
    fetchData(options);
  }, [options]); // Creates infinite loop!
}

// ✅ Correct - use useMemo to preserve reference
function MyComponent() {
  const options = useMemo(() => ({
    limit: 10,
    sort: 'asc'
  }), []); // Only created once
  
  useEffect(() => {
    fetchData(options);
  }, [options]);
}

// ✅ Also correct - move object inside useEffect
function MyComponent() {
  useEffect(() => {
    const options = { limit: 10, sort: 'asc' };
    fetchData(options);
  }, []); // options not in dependencies
}

// ❌ Wrong - count is both updated and a dependency
useEffect(() => {
  setCount(count + 1);
}, [count]); // Infinite loop!

// ✅ Correct - use functional update, remove from dependencies
useEffect(() => {
  setCount(prev => prev + 1);
}, []); // Runs once

// ✅ Correct - use a different trigger for the effect
useEffect(() => {
  if (shouldUpdate) {
    setCount(prev => prev + 1);
  }
}, [shouldUpdate]); // Only runs when shouldUpdate changes

// ❌ Wrong - handleFetch recreated on every render
function MyComponent() {
  const [data, setData] = useState(null);
  
  const handleFetch = () => {
    fetchData().then(setData);
  };
  
  useEffect(() => {
    handleFetch();
  }, [handleFetch]); // Infinite loop!
}

// ✅ Correct - useCallback maintains stable reference
function MyComponent() {
  const [data, setData] = useState(null);
  
  const handleFetch = useCallback(() => {
    fetchData().then(setData);
  }, []); // Stable reference
  
  useEffect(() => {
    handleFetch();
  }, [handleFetch]); // Only runs when handleFetch changes (never)
}