React 18 createRoot compatibility boundary for zero-downtime concurrent rendering rollout
0 reputation · 23 Aug 2020, 19:27 UTC
We are planning a React 18.x upgrade for a small application to adopt Concurrent Rendering and automatic batching while keeping the service continuously available. The intended path is to replace ReactDOM.render with the createRoot API from react-dom/client, but the existing tree mixes class components with third-party libraries whose concurrent compatibility is unclear. We need to decide whether to convert class components to function components before switching to createRoot or to flip the root first and refactor incrementally. There is also uncertainty around automatic batching: some legacy setState call sites may assume synchronous DOM reads immediately after state updates, and React 18 batches more aggressively across promises, timeouts, and native events. Before committing to a rollout strategy, we want to confirm the practical compatibility boundary and the safest sequencing.
Should the createRoot transition precede class-to-function component conversion, or is the reverse required to avoid subtle behavior changes? What is the most reliable way to audit third-party dependencies for Concurrent Rendering compatibility in a production-like staging environment? Which existing setState patterns are most likely to break under React 18's expanded automatic batching, and how can they be identified before release?
