How to fix Maximum update depth exceeded in React

Error: Maximum update depth exceeded. This can happen when a component
repeatedly calls setState inside componentWillUpdate or componentDidUpdate.
React limits the number of nested updates to prevent infinite loops.

  at ComponentName (ComponentName.tsx:45)

// ❌ Bad: Calling setState during render
function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Infinite loop!
  return <div>{count}</div>;
}

// ✅ Good: Use useEffect with empty dependencies
function Counter() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    setCount(count + 1);
  }, []); // Only runs once on mount
  
  return <div>{count}</div>;
}

// ✅ Better: Initialize state with the value
function Counter() {
  const [count] = useState(1); // Start at 1 if that's what you need
  return <div>{count}</div>;
}

// ❌ Bad: Updating state that triggers the effect
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [user]); // user changes, effect runs, sets user, repeat!
  
  return <div>{user?.name}</div>;
}

// ✅ Good: Depend only on external values
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // Only re-run when userId changes
  
  return <div>{user?.name}</div>;
}

// ❌ Bad: Calling function immediately
function Button() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={setCount(count + 1)}>
      {/* setCount is called during render! */}
      Click me
    </button>
  );
}

// ✅ Good: Pass function reference
function Button() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Click me: {count}
    </button>
  );
}

// ✅ Better: Use functional update form
function Button() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Click me: {count}
    </button>
  );
}

// ❌ Bad: Object created on every render
function Component() {
  const [data, setData] = useState(null);
  const options = { enabled: true }; // New object each render
  
  useEffect(() => {
    fetchData(options).then(setData);
  }, [options]); // options changes every render!
  
  return <div>{data}</div>;
}

// ✅ Good: Use useMemo for objects
function Component() {
  const [data, setData] = useState(null);
  const options = useMemo(() => ({ enabled: true }), []);
  
  useEffect(() => {
    fetchData(options).then(setData);
  }, [options]);
  
  return <div>{data}</div>;
}

// ✅ Better: Use primitive dependencies or move object inside effect
function Component() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    const options = { enabled: true };
    fetchData(options).then(setData);
  }, []); // No object dependencies needed
  
  return <div>{data}</div>;
}

// ❌ Bad: Unconditional setState
class Component extends React.Component {
  componentDidUpdate(prevProps) {
    this.setState({ updated: true }); // Infinite loop!
  }
}

// ✅ Good: Conditional setState
class Component extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.setState({ loading: true });
      this.fetchUser(this.props.userId);
    }
  }
}

// ✅ Better: Use getDerivedStateFromProps for state derived from props
class Component extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.userId !== state.prevUserId) {
      return { prevUserId: props.userId, loading: true };
    }
    return null;
  }
}

import { useState, useCallback } from 'react';
import { debounce } from 'lodash';

// ❌ Bad: Updating on every input change can trigger rapid re-renders
function SearchInput() {
  const [value, setValue] = useState('');
  const [results, setResults] = useState([]);
  
  const handleChange = (e) => {
    setValue(e.target.value);
    fetchResults(e.target.value).then(setResults);
  };
  
  return <input onChange={handleChange} />;
}

// ✅ Good: Debounce the search
function SearchInput() {
  const [value, setValue] = useState('');
  const [results, setResults] = useState([]);
  
  const debouncedSearch = useCallback(
    debounce((query) => {
      fetchResults(query).then(setResults);
    }, 300),
    []
  );
  
  const handleChange = (e) => {
    setValue(e.target.value);
    debouncedSearch(e.target.value);
  };
  
  return <input value={value} onChange={handleChange} />;
}