Core Roles

React is the core library that provides the tools and logic for defining and managing UI components, state, and props. React-DOM, on the other hand, is a separate package responsible for rendering those components into the browser’s Document Object Model (DOM) and handling DOM-specific interactions.

Detailed Breakdown

Code Example

// React: Defining the UI logic
import React, { useState } from "react";
// React-DOM: Rendering to the DOM
import ReactDOM from "react-dom";

function App() {
const [count, setCount] = useState(0); // React's core feature

return (
  <div>
    <p>Count: {count}</p>
    <button onClick={() => setCount(count + 1)}>Increment</button>
  </div>
);
}

// React-DOM renders the App component to the DOM
ReactDOM.render(<App />, document.getElementById("root"));

Here, React handles the component logic and state, while React-DOM bridges it to the browser DOM.

Why Separate?

React was split into separate packages starting with version 0.14 (2015) to make it platform-agnostic. This modularity allows:

• React: To focus on UI logic and be reusable across environments (e.g., React Native for mobile).
• React-DOM: To handle browser-specific rendering and events, keeping React core lightweight.

Other renderers like react-native or react-three-fiber (for 3D) can use the same React core with different output targets.

Practical Implications

• Imports: You need both react and react-dom in browser-based projects.
• Hydration: React-DOM provides hydrate for server-side rendering, attaching events to pre-rendered HTML.
• Flexibility: The separation enables React to adapt to non-DOM environments without altering its core.

Historical Context

Before the split, React included DOM rendering. As its popularity grew, Facebook separated React-DOM to support diverse platforms, reflecting React’s evolution from a browser-centric library to a universal UI framework.

Note: In modern setups (e.g., with Next.js or Create React App), the distinction is often abstracted away, but understanding it helps when debugging or working across platforms.