How to fix Warning: A component called useState() or useReducer() whose update was not processed in React

// WRONG - state update during render
function MyComponent() {
  const [count, setCount] = useState(0);
  
  // This runs during every render!
  setCount(count + 1);
  
  return <div>{count}</div>;
}

// CORRECT - state update in useEffect
function MyComponent() {
  const [count, setCount] = useState(0);
  
  useEffect(() => {
    // This runs after render
    setCount(prev => prev + 1);
  }, []);
  
  return <div>{count}</div>;
}

import { unstable_batchedUpdates } from "react-dom"; // For React 17 and below

// In async callback without React 18 automatic batching
setTimeout(() => {
  // React 17 and below need explicit batching
  unstable_batchedUpdates(() => {
    setCount(prev => prev + 1);
    setLoading(false);
  });
  
  // React 18+ automatically batches most async updates
}, 1000);

// Alternative: Use React 18 createRoot with automatic batching
const root = createRoot(document.getElementById("root"));
root.render(<App />);

function MyComponent() {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    let isMounted = true;
    
    fetchData().then(result => {
      if (isMounted) {
        setData(result); // Only update if component still mounted
      }
    });
    
    return () => {
      isMounted = false; // Cleanup: prevent updates after unmount
    };
  }, []);
  
  return <div>{data}</div>;
}

// WRONG - native event listener
useEffect(() => {
  const handleClick = () => {
    setCount(prev => prev + 1); // Might not batch properly
  };
  
  document.addEventListener("click", handleClick);
  return () => document.removeEventListener("click", handleClick);
}, []);

// CORRECT - React synthetic event
return (
  <button onClick={() => setCount(prev => prev + 1)}>
    Click me
  </button>
);

// CORRECT - native listener with batching
useEffect(() => {
  const handleClick = () => {
    unstable_batchedUpdates(() => {
      setCount(prev => prev + 1);
    });
  };
  
  document.addEventListener("click", handleClick);
  return () => document.removeEventListener("click", handleClick);
}, []);

// WRONG - memo prevents re-renders even when state changes
const MyComponent = React.memo(function MyComponent({ count }) {
  return <div>{count}</div>;
}, (prevProps, nextProps) => {
  // Custom comparison that always returns true (no re-render)
  return true;
});

// CORRECT - proper comparison
const MyComponent = React.memo(function MyComponent({ count }) {
  return <div>{count}</div>;
}, (prevProps, nextProps) => {
  // Only prevent re-render if count hasn't changed
  return prevProps.count === nextProps.count;
});

// Class component with shouldComponentUpdate
class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // Allow update if state changed
    return this.state.count !== nextState.count || 
           this.props.data !== nextProps.data;
  }
  
  // ...
}

// WRONG - might use stale state in async context
const handleIncrement = () => {
  setTimeout(() => {
    setCount(count + 1); // Uses stale closure
  }, 1000);
};

// CORRECT - functional update ensures fresh state
const handleIncrement = () => {
  setTimeout(() => {
    setCount(prev => prev + 1); // Always uses latest state
  }, 1000);
};

// Also correct for multiple rapid updates
const handleMultiple = () => {
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  setCount(prev => prev + 1);
  // Result: count increases by 3
};

// In your main app file
import React from "react";
import ReactDOM from "react-dom/client";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// Check console for additional warnings about unsafe lifecycle usage
// StrictMode helps identify:
// - State updates during render
// - Effects with missing dependencies
// - Legacy lifecycle method usage