How to fix Warning: Cannot update a component from inside the function body of a different component in React

// ❌ WRONG - State update during render
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  // This triggers during ParentComponent's render
  setCount(1); // Warning!
  
  return <ChildComponent />;
}

// ✅ CORRECT - Use useEffect
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // This runs AFTER render
    setCount(1);
  }, []);
  
  return <ChildComponent />;
}

// ❌ WRONG - Calling update function during render
function ParentComponent() {
  const [data, setData] = useState(null);
  
  // fetchData triggers setData during render
  fetchData().then(setData); // Warning!
  
  return <ChildComponent />;
}

// ✅ CORRECT - Use useEffect or event handlers
function ParentComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  
  const handleClick = () => {
    fetchData().then(setData);
  };
  
  return (
    <div>
      <ChildComponent />
      <button onClick={handleClick}>Load Data</button>
    </div>
  );
}

// ❌ WRONG - Parent updating child state during render
function ParentComponent() {
  const childRef = useRef();
  
  // This would update child state during parent render
  if (childRef.current) {
    childRef.current.updateState(); // Warning!
  }
  
  return <ChildComponent ref={childRef} />;
}

// ✅ CORRECT - Use props and callbacks
function ParentComponent() {
  const [childData, setChildData] = useState(null);
  
  const updateChild = (newData) => {
    setChildData(newData);
  };
  
  return (
    <ChildComponent 
      data={childData}
      onUpdate={updateChild}
    />
  );
}

function ChildComponent({ data, onUpdate }) {
  // Child controls its own updates via onUpdate callback
  const handleClick = () => {
    onUpdate('new data');
  };
  
  return <button onClick={handleClick}>Update</button>;
}

// ❌ WRONG - Updating context during render
function MyComponent() {
  const { setTheme } = useContext(ThemeContext);
  
  // This updates context during render
  setTheme('dark'); // Warning!
  
  return <div>Content</div>;
}

// ✅ CORRECT - Update context in useEffect or event handlers
function MyComponent() {
  const { theme, setTheme } = useContext(ThemeContext);
  
  useEffect(() => {
    // Update context after render if needed
    if (someCondition) {
      setTheme('dark');
    }
  }, [someCondition, setTheme]);
  
  const handleToggle = () => {
    setTheme(theme === 'light' ? 'dark' : 'light');
  };
  
  return (
    <div>
      <button onClick={handleToggle}>Toggle Theme</button>
    </div>
  );
}

// ❌ WRONG - New function on every render
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleUpdate = () => {
    setCount(count + 1);
  };
  
  // handleUpdate is new on every render
  // If ChildComponent calls it during Parent's render, warning occurs
  return <ChildComponent onUpdate={handleUpdate} />;
}

// ✅ CORRECT - Memoize callbacks
function ParentComponent() {
  const [count, setCount] = useState(0);
  
  const handleUpdate = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // Empty dependency array
  
  return <ChildComponent onUpdate={handleUpdate} />;
}

// Even better - use functional updates
const handleUpdate = useCallback(() => {
  setCount(prev => prev + 1);
}, []);

// ❌ WRONG - Synchronous state update during render
function DataComponent() {
  const [data, setData] = useState(null);
  
  // This runs during render and updates state
  const result = computeExpensiveValue();
  setData(result); // Warning!
  
  return <div>{data}</div>;
}

// ✅ CORRECT - Use useEffect or useMemo
function DataComponent() {
  const [data, setData] = useState(null);
  
  const expensiveValue = useMemo(() => {
    return computeExpensiveValue();
  }, [dependencies]);
  
  useEffect(() => {
    setData(expensiveValue);
  }, [expensiveValue]);
  
  return <div>{data}</div>;
}

// ✅ CORRECT - Lazy initialization
function DataComponent() {
  const [data, setData] = useState(() => {
    // This only runs once during initial render
    return computeExpensiveValue();
  });
  
  return <div>{data}</div>;
}

// In your main app file (index.jsx/App.jsx)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// Or in Next.js, update next.config.js
export default {
  reactStrictMode: true,
};