How to fix RangeError: Maximum call stack size exceeded (component nesting) in React

// BAD - This causes infinite loop
function Counter() {
  const [count, setCount] = useState(0);
  setCount(count + 1); // Called on every render, triggers re-render
  return <div>{count}</div>;
}

// GOOD - Use useEffect with proper dependency array
function Counter() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1);
  }, []); // Empty dependency array - runs once
  return <div>{count}</div>;
}

// BAD - count in dependency array, but we update count
function Component() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(count + 1); // Updates count, effect runs again
  }, [count]); // count is dependency - infinite loop
  return <div>{count}</div>;
}

// GOOD - Use functional state update or proper dependency array
function Component() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setCount(prev => prev + 1); // Update state based on previous value
  }, []); // Empty array - runs once only
  return <div>{count}</div>;
}

// GOOD - Separate state and effect concerns
function Component() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(d => {
        setData(d);
        setLoading(false);
      });
  }, []); // Dependencies don't include state being updated

  return <div>{loading ? 'Loading...' : data}</div>;
}

// BadComponent.tsx
import BadComponent from './BadComponent'; // Circular import!

function BadComponent() {
  return <BadComponent />; // Also renders itself
}
export default BadComponent;

// Solution 1: Separate logic and rendering
// ComponentLogic.tsx - holds the recursive logic
function TreeNode({ items }: { items: TreeItem[] }) {
  return items.map(item => (
    <div key={item.id}>
      {item.name}
      {item.children && <TreeNode items={item.children} />}
    </div>
  ));
}

// Solution 2: Use forward references for complex recursive patterns
const LazyRecursive = lazy(() => import('./RecursiveComponent'));

// BAD - No base case, infinite recursion
function Tree({ node }) {
  return (
    <div>
      {node.name}
      <Tree node={node.child} /> {/* Always recurses */}
    </div>
  );
}

// GOOD - Base case prevents infinite recursion
function Tree({ node }) {
  // Base case - stop when node is null/undefined
  if (!node) return null;

  // Recursive case - only recurse if children exist
  return (
    <div>
      {node.name}
      {node.children?.map(child => (
        <Tree key={child.id} node={child} />
      ))}
    </div>
  );
}

// GOOD - Limit recursion depth for safety
function Tree({ node, depth = 0, maxDepth = 20 }) {
  if (!node || depth >= maxDepth) return null;

  return (
    <div>
      {node.name}
      {node.children?.map(child => (
        <Tree key={child.id} node={child} depth={depth + 1} maxDepth={maxDepth} />
      ))}
    </div>
  );
}

// BAD - onClick sets state that re-renders the handler
function Component() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Click me {count} {/* onClick reference changes each render */}
    </button>
  );
}

// GOOD - Use useCallback to stabilize handler
function Component() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(prev => prev + 1);
  }, []);

  return <button onClick={handleClick}>Click me {count}</button>;
}

// BAD - Passing handler that updates parent state
function Parent() {
  const [data, setData] = useState([]);

  return (
    <Child onUpdate={() => setData([...data, 'item'])} />
    {/* onUpdate prop changes each render, can cause infinite updates */}
  );
}

// GOOD - Memoize the callback
function Parent() {
  const [data, setData] = useState([]);

  const handleUpdate = useCallback(() => {
    setData(prev => [...prev, 'item']);
  }, []);

  return <Child onUpdate={handleUpdate} />;
}

// Recursive approach - can overflow with large trees
function TreeNodeRecursive({ items }) {
  return items.map(item => (
    <div key={item.id}>
      {item.name}
      {item.children && <TreeNodeRecursive items={item.children} />}
    </div>
  ));
}

// Iterative approach using a queue - avoids stack overflow
function TreeNodeIterative({ root }) {
  const queue = [root];
  const elements = [];

  while (queue.length > 0) {
    const node = queue.shift();
    if (!node) continue;

    elements.push(
      <div key={node.id}>
        {node.name}
      </div>
    );

    if (node.children) {
      queue.push(...node.children);
    }
  }

  return <>{elements}</>;
}

// Or use flatMap to flatten the tree first
function flattenTree(items, depth = 0) {
  const MAX_DEPTH = 100;
  if (depth >= MAX_DEPTH) return [];

  return items.flatMap(item => [
    { ...item, depth },
    ...(item.children ? flattenTree(item.children, depth + 1) : [])
  ]);
}

function TreeNodeFlat({ items }) {
  const flat = flattenTree(items);
  return flat.map(item => (
    <div key={item.id} style={{ marginLeft: `${item.depth * 20}px` }}>
      {item.name}
    </div>
  ));
}

function ProblematicComponent() {
  console.log('ProblematicComponent rendered');
  // If you see this logged hundreds of times in quick succession,
  // this is your culprit
  return <div>Content</div>;
}

// Or use custom hook to track
function useRenderCount(componentName) {
  const renders = useRef(0);
  useEffect(() => {
    renders.current++;
    console.log(`${componentName} rendered ${renders.current} times`);
    if (renders.current > 50) {
      console.warn(`${componentName} rendered over 50 times - possible infinite loop`);
    }
  });
}

function Component() {
  useRenderCount('Component');
  return <div>Content</div>;
}