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.