ReactDOM render process - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the role of ReactDOM in a React application?

ReactDOM connects React components to the actual web page by rendering them into the browser's DOM. It acts like a bridge between React's virtual elements and the real HTML elements you see.

beginner

What does the ReactDOM.render() function do?

ReactDOM.render() takes a React component or element and displays it inside a specified HTML element on the page. It updates the page content to match the React component's output.

intermediate

Why does React use a virtual DOM during the render process?

React uses a virtual DOM to quickly compare changes in components without touching the real DOM often. This makes updates faster and smoother, like planning changes on paper before painting a wall.

intermediate

What happens when ReactDOM.render() is called multiple times on the same container?

ReactDOM replaces the previous content inside the container with the new React component's output. It updates only what changed, keeping the page efficient and responsive.

advanced

How does ReactDOM hydrate() differ from ReactDOM.render()?

ReactDOM.hydrate() is used to attach React's event handlers to existing HTML generated by server-side rendering, instead of creating new content. It helps React take over a server-rendered page smoothly.

What is the main purpose of ReactDOM.render()?

A To display React components inside a web page element

B To create new React components

C To style React components

D To manage React state

ReactDOM.render() shows React components inside a specified HTML element on the page.

Why does React use a virtual DOM?

A To create new HTML tags

B To store user data

C To style components faster

D To speed up updates by minimizing direct changes to the real DOM

The virtual DOM lets React compare changes quickly and update the real DOM efficiently.

What does ReactDOM.hydrate() do?

A Updates CSS styles

B Attaches React to existing server-rendered HTML

C Removes React components from the page

D Creates new React components

hydrate() connects React to HTML already rendered on the server, enabling interactivity.

If ReactDOM.render() is called twice on the same container, what happens?

A An error occurs

B Both components show side by side

C The container updates to show the latest React component

D Nothing changes

ReactDOM.render() replaces the old content with the new component inside the container.

Which of these is NOT a part of the ReactDOM render process?

A Directly modifying CSS styles

B Comparing virtual DOM with real DOM

C Updating the real DOM efficiently

D Rendering React components into HTML elements

ReactDOM render process does not directly modify CSS styles; styling is handled separately.

Explain the steps ReactDOM takes when rendering a React component into the browser.

Think about how React updates the page efficiently using virtual DOM.

Describe the difference between ReactDOM.render() and ReactDOM.hydrate() and when to use each.

Consider server-side rendering and client-side rendering scenarios.

Practice

1. What is the main purpose of ReactDOM.createRoot in React?

easy

A. To define a new React component

B. To update the state of a component

C. To create a root container to render React components into the DOM

D. To fetch data from an API

Solution

1. Step 1: Understand ReactDOM.createRoot role

   This function creates a root container that connects React with a specific DOM element.

2. Step 2: Connect React components to the DOM

   Using this root, React can render components inside the chosen HTML element.

3. Final Answer:

   To create a root container to render React components into the DOM -> Option C

4. Quick Check:

   ReactDOM.createRoot creates root container [OK]

Hint: ReactDOM.createRoot sets where React shows content [OK]

Common Mistakes:

• Confusing createRoot with component creation
• Thinking it updates state
• Assuming it fetches data

2. Which of the following is the correct syntax to render a React component App inside a DOM element with id root using React 18+?

easy

A. const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

B. ReactDOM.render(, document.getElementById('root'));

C. ReactDOM.createRoot().render(document.getElementById('root'));

D. const root = ReactDOM.render(document.getElementById('root')); root.createRoot();

Solution

1. Step 1: Identify React 18+ render syntax

   React 18+ uses ReactDOM.createRoot with root.render to mount components.

2. Step 2: Match correct method calls and parameters

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(); correctly calls createRoot with the DOM element, then calls render with the component.

3. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); -> Option A

4. Quick Check:

   ReactDOM.createRoot + root.render = correct syntax [OK]

Hint: Use createRoot on element, then call render with component [OK]

Common Mistakes:

• Using old ReactDOM.render syntax in React 18+
• Swapping parameters in createRoot or render
• Calling methods in wrong order

3. Given the code below, what will be displayed on the web page?

const root = ReactDOM.createRoot(document.getElementById('root'));
function Greeting() {
  return <h1>Hello, React!</h1>;
}
root.render(<Greeting />);

medium

A. Hello, React! inside an h1 heading

B. An empty page

C. Error: Greeting is not defined

D. The text 'Greeting' displayed

Solution

1. Step 1: Understand component definition and rendering

   The Greeting function returns an h1 element with text 'Hello, React!'.

2. Step 2: ReactDOM renders Greeting component inside 'root'

   Calling root.render with <Greeting /> displays the returned h1 content in the page.

3. Final Answer:

   Hello, React! inside an h1 heading -> Option A

4. Quick Check:

   Component returns h1 with text, so page shows it [OK]

Hint: Component returns h1 with text, so that text appears [OK]

Common Mistakes:

• Thinking component name shows as text
• Expecting error without import
• Assuming empty page without render

4. What is wrong with the following ReactDOM render code?

const root = ReactDOM.createRoot('root');
root.render(<App />);

medium

A. createRoot cannot be assigned to a variable

B. root.render should be called before createRoot

C. App component must be a class component

D. The argument to createRoot should be a DOM element, not a string

Solution

1. Step 1: Check createRoot argument type

   createRoot expects a DOM element, but 'root' is a string, not an element.

2. Step 2: Correct usage requires document.getElementById('root')

   We must pass document.getElementById('root') to get the actual DOM node.

3. Final Answer:

   The argument to createRoot should be a DOM element, not a string -> Option D

4. Quick Check:

   createRoot needs DOM element, not string [OK]

Hint: Pass DOM element, not string, to createRoot [OK]

Common Mistakes:

• Passing string id instead of element
• Calling render before createRoot
• Thinking component type matters here

5. You want to render a React component Dashboard inside a div with id app-root. You also want to ensure the component updates correctly when state changes. Which code snippet correctly sets up the ReactDOM render process for this scenario?

hard

A. const root = ReactDOM.createRoot('app-root'); root.render(Dashboard);

B. const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render();

C. ReactDOM.render(, document.getElementById('app-root'));

D. const root = ReactDOM.createRoot(document.querySelector('#app-root')); root.render(Dashboard());

Solution

1. Step 1: Select the correct DOM element

   Use document.getElementById('app-root') to get the div element for rendering.

2. Step 2: Use ReactDOM.createRoot and root.render properly

   Call createRoot with the element, then render the component as JSX (<Dashboard />) to enable React updates.

3. Step 3: Avoid passing string or calling component as function

   Passing string or calling Dashboard() directly breaks React's rendering and update process.

4. Final Answer:

   const root = ReactDOM.createRoot(document.getElementById('app-root')); root.render(<Dashboard />); -> Option B

5. Quick Check:

   createRoot + render with JSX component = correct [OK]

Hint: Use createRoot on element, render JSX component for updates [OK]

Common Mistakes:

• Passing string instead of element to createRoot
• Using old ReactDOM.render in React 18+
• Calling component as function instead of JSX