Why React is used - Performance Evidence

Performance: Why React is used

MEDIUM IMPACT

React affects page load speed and interaction responsiveness by managing UI updates efficiently.

Updating UI efficiently when data changes

React

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => setCount(c => c + 1);

  return <button onClick={increment}>Count: {count}</button>;
}

React batches state updates and updates only changed parts of the DOM efficiently.

📈 Performance GainSingle reflow and repaint per batch of updates, improving interaction responsiveness.

Updating UI efficiently when data changes

React

const updateUI = () => {
  const element = document.getElementById('count');
  element.innerText = newCount;
};

// Called multiple times rapidly
updateUI();
updateUI();
updateUI();

Direct DOM manipulation triggers multiple reflows and repaints, slowing interaction.

📉 Performance CostTriggers multiple reflows and repaints per update, blocking rendering for tens of milliseconds.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation on every change	Many direct node updates	Multiple reflows per update	High paint cost due to frequent changes	[X] Bad
React state updates with virtual DOM	Minimal DOM updates after diffing	Single reflow per batch	Lower paint cost due to optimized updates	[OK] Good

Rendering Pipeline

React uses a virtual DOM to calculate changes before updating the real DOM, reducing costly layout and paint operations.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages caused by direct DOM updates

Core Web Vital Affected

INP

React affects page load speed and interaction responsiveness by managing UI updates efficiently.

Optimization Tips

1Use React to batch UI updates and reduce direct DOM changes.

2Avoid frequent direct DOM manipulation to prevent multiple reflows.

3React's virtual DOM diffing minimizes layout and paint costs.

Performance Quiz - 3 Questions

Why does React improve UI update performance compared to direct DOM manipulation?

A It reloads the entire page after each change.

B It uses more CSS animations to hide updates.

C It batches updates and uses a virtual DOM to minimize real DOM changes.

D It disables browser rendering during updates.

DevTools: Performance

How to check: Record a performance profile while interacting with the UI. Look for long scripting tasks and multiple layout/repaint events.

What to look for: Fewer layout and paint events indicate efficient updates; many indicate costly direct DOM manipulation.

Practice

1. Why do developers use React for building websites?

easy

A. To design database schemas

B. To write backend server code easily

C. To manage network security settings

D. To create reusable components that make development faster

Solution

1. Step 1: Understand React's main feature

   React breaks websites into small, reusable parts called components, which helps developers build faster and maintainable code.

2. Step 2: Compare options with React's purpose

   Only To create reusable components that make development faster describes creating reusable components, which is React's core use. Other options relate to backend, database, or security, which React does not handle.

3. Final Answer:

   To create reusable components that make development faster -> Option D

4. Quick Check:

   Reusable components = C [OK]

Hint: React is mainly for building UI components fast [OK]

Common Mistakes:

• Confusing React with backend frameworks
• Thinking React manages databases
• Assuming React handles security

2. Which of the following is the correct way to define a React functional component?

easy

A. component MyComponent() { return Hello; }

B. function MyComponent() { return Hello; }

C. def MyComponent() { return Hello; }

D. func MyComponent() { return Hello; }

Solution

1. Step 1: Recall React functional component syntax

   React functional components are JavaScript functions that return JSX, defined using the keyword 'function'.

2. Step 2: Check each option's syntax

   function MyComponent() { return
   Hello; } uses 'function' correctly. Options B, C, and D use invalid keywords not recognized in JavaScript or React.

3. Final Answer:

   function MyComponent() { return <div>Hello</div>; } -> Option B

4. Quick Check:

   React components use 'function' keyword [OK]

Hint: React components start with 'function' keyword [OK]

Common Mistakes:

• Using Python or other language keywords
• Confusing component declaration syntax
• Omitting return statement or JSX

3. What will be the result of this React component rendering?

function Greeting() {
  const name = 'Alice';
  return <h1>Hello, {name}!</h1>;
}

medium

A. Syntax Error

B. Hello, {name}!

C. <h1>Hello, Alice!</h1>

D. <h1>Hello, name!</h1>

Solution

1. Step 1: Understand JSX expression embedding

   In JSX, curly braces { } embed JavaScript expressions. Here, {name} inserts the value of the variable 'name', which is 'Alice'.

2. Step 2: Predict rendered output

   The component returns an h1 element with text 'Hello, Alice!'. So the rendered HTML is <h1>Hello, Alice!</h1>.

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option C

4. Quick Check:

   JSX {name} inserts variable value [OK]

Hint: JSX uses { } to insert variables [OK]

Common Mistakes:

• Thinking {name} prints literally
• Confusing JSX with plain HTML
• Expecting syntax error for valid JSX

4. Identify the error in this React component code:

function Welcome() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>Have a nice day!</p>
    </div>
  )
  console.log('Rendered');
}

medium

A. console.log is unreachable after return statement

B. Missing semicolon after return

C. JSX tags are not closed properly

D. Function name should be lowercase

Solution

1. Step 1: Analyze function flow

   The return statement ends the function execution, so any code after it is unreachable.

2. Step 2: Check the console.log placement

   console.log('Rendered') is after return, so it will never run, which is a logical error.

3. Final Answer:

   console.log is unreachable after return statement -> Option A

4. Quick Check:

   Code after return is unreachable [OK]

Hint: Code after return won't run [OK]

Common Mistakes:

• Ignoring unreachable code warnings
• Thinking semicolon is mandatory after return
• Assuming function names must be lowercase

5. How does React improve website speed when updating the user interface?

hard

A. By updating only the parts of the page that change using a virtual DOM

B. By reloading the entire page on every change

C. By using server-side rendering exclusively

D. By disabling user interactions during updates

Solution

1. Step 1: Understand React's update mechanism

   React uses a virtual DOM to track changes and updates only the parts of the real DOM that need to change, avoiding full page reloads.

2. Step 2: Compare options with React's behavior

   By updating only the parts of the page that change using a virtual DOM correctly describes this selective update process. Options B, C, and D describe incorrect or unrelated behaviors.

3. Final Answer:

   By updating only the parts of the page that change using a virtual DOM -> Option A

4. Quick Check:

   Virtual DOM updates only changed parts [OK]

Hint: React updates only changed parts for speed [OK]

Common Mistakes:

• Thinking React reloads whole page
• Confusing client and server rendering
• Assuming React disables interactions