⚛️ createRoot() vs render()

? Quick Overview

React 18 introduced a new root API called createRoot(). It replaces the legacy render() method and unlocks concurrent rendering, better scheduling, and modern performance optimizations.

? Key Concepts

• Legacy synchronous rendering vs concurrent rendering
• Automatic batching in React 18
• Modern root-based rendering API
• Better support for Suspense and transitions

? Old Method: ReactDOM.render()

This method was used in React 17 and below. It renders synchronously and does not support concurrent features.

// React 17 and below rendering API
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

• Synchronous rendering only
• No concurrent features
• Deprecated in React 18

? New Method: ReactDOM.createRoot()

React 18 applications should use createRoot() from react-dom/client. This enables concurrent rendering.

// React 18+ concurrent root API
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

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

• Supports concurrent rendering
• Enables automatic batching
• Works with Suspense and transitions

? Migration Steps

// Migration from render() to createRoot()
// ❌ Old API
ReactDOM.render(<App />, document.getElementById("root"));

// ✅ New API
const root = createRoot(document.getElementById("root"));
root.render(<App />);

1. Import from react-dom/client
2. Create a root instance
3. Call root.render()

⚖️ Comparison Summary

• render() → legacy, synchronous, deprecated
• createRoot() → modern, concurrent, optimized

? Concurrent Feature Example

// useTransition works only with createRoot()
import React, { useState, useTransition } from "react";

function Demo() {
const [text, setText] = useState("");
const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
startTransition(() => {
setText(e.target.value);
});
};

return (
<div>
<input type="text" onChange={handleChange} />
<p>{isPending ? "Loading..." : text}</p>
</div>
);
}

export default Demo;

This example demonstrates concurrent rendering using useTransition(), which requires createRoot().