react-modernization

Replace this.state with useState calls, convert lifecycle methods like componentDidMount and componentDidUpdate into useEffect with dependency arrays, and swap context consumers for useContext. Extract reusable logic into custom hooks instead of HOCs.

Update react and react-dom packages, then replace ReactDOM.render with the createRoot API from react-dom/client. Test with StrictMode to catch double-invocation issues and review automatic batching behavior in async handlers.

React's official codemods via jscodeshift handle renaming unsafe lifecycles and updating imports. Third-party codemods like react/hooks/convert-class-to-function can convert class components, and you can run them with --dry --print to preview changes.

Automatic batching in React 18 batches state updates even inside promises and setTimeout, which can change render timing in code that relied on synchronous updates. Use flushSync from react-dom to opt out when synchronous rendering is required.

Use useTransition for non-urgent updates like filtering large lists or search results, keeping urgent updates like input typing responsive. The isPending flag lets you show loading indicators while the transition renders.