ReactDOM render process - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when ReactDOM.render is called twice on the same container?

Consider this React code snippet:

const root = document.getElementById('root');
ReactDOM.render(<h1>First</h1>, root);
ReactDOM.render(<h1>Second</h1>, root);

What will be displayed inside the root element after both calls?

React

const root = document.getElementById('root');
ReactDOM.render(<h1>First</h1>, root);
ReactDOM.render(<h1>Second</h1>, root);

A The root element will display 'First' only.

B The root element will display 'Second' only.

C The root element will display both 'First' and 'Second' headings.

D The root element will be empty.

💡 Hint

Think about how ReactDOM.render replaces content in the container.

ReactDOM.render replaces the content inside the container each time it is called. The second call overwrites the first, so only 'Second' is shown.

❓ lifecycle

intermediate

Which lifecycle behavior occurs when ReactDOM.render updates an existing component?

When ReactDOM.render is called on a container that already has a React component rendered, what lifecycle behavior happens to the existing component?

A The existing component is updated with new props and re-rendered.

B The existing component is unmounted and a new one is mounted.

C Nothing happens; the component stays the same.

D React throws an error because the container is not empty.

💡 Hint

React tries to reuse components when possible.

ReactDOM.render updates the existing component by passing new props and re-rendering it instead of unmounting and remounting.

📝 Syntax

advanced

What error occurs if ReactDOM.render is called without a valid container?

What happens if you call ReactDOM.render(<App />, null) or with an undefined container?

React

ReactDOM.render(<App />, null);

A No error; React renders to a default container.

B SyntaxError: Unexpected token '<'

C ReferenceError: App is not defined

D TypeError: Cannot read properties of null (reading 'nodeType')

💡 Hint

ReactDOM.render expects a real DOM element as container.

Passing null or undefined as container causes ReactDOM.render to fail because it tries to access properties of the container element.

❓ state_output

advanced

What is the state value after ReactDOM.render updates a component?

Given this React component:

function Counter() {
  const [count, setCount] = React.useState(0);
  return <div>Count: {count}</div>;
}

If ReactDOM.render(<Counter />, root) is called, then later ReactDOM.render(<Counter />, root) is called again, what will be the displayed count?

React

function Counter() {
  const [count, setCount] = React.useState(0);
  return <div>Count: {count}</div>;
}

ReactDOM.render(<Counter />, root);
// Later
ReactDOM.render(<Counter />, root);

A Count: 0

B Count: 1

C Count: undefined

D Count: NaN

💡 Hint

Think about whether state persists between separate ReactDOM.render calls.

Each ReactDOM.render call creates a new component instance, so state resets to initial value 0.

🔧 Debug

expert

Why does ReactDOM.render not update the UI after state change in a class component?

Consider this class component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.state.count += 1;
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

After calling increment() and then ReactDOM.render(<MyComponent />, root) again, the UI does not update. Why?

React

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.state.count += 1;
  }

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

// Usage
const root = document.getElementById('root');
const comp = new MyComponent();
comp.increment();
ReactDOM.render(<MyComponent />, root);

A Because ReactDOM.render cannot render class components.

B Because increment() was not called inside render method.

C Because state was mutated directly without using setState, React does not detect the change.

D Because ReactDOM.render requires a functional component.

💡 Hint

How does React detect state changes in class components?

Directly mutating this.state does not trigger React's update mechanism. setState must be used to notify React of changes.

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