What is React - Performance Impact

Performance: What is React

MEDIUM IMPACT

React affects how quickly a web page can show interactive content by efficiently updating the parts of the page that change.

Updating UI efficiently when data changes

React

import React, { useState } from 'react';
function App() {
  const [data, setData] = useState('');
  return <div>{data}</div>;
}
export default App;

React updates only changed parts using virtual DOM diffing, minimizing real DOM changes.

📈 Performance Gainreduces reflows to only changed nodes, improving interaction responsiveness

Updating UI efficiently when data changes

React

const element = document.getElementById('app');
element.innerHTML = '<div>' + newData + '</div>';

Replaces entire content causing full re-render and layout recalculation.

📉 Performance Costtriggers 1 full reflow and repaint per update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Direct DOM manipulation replacing full content	High (full subtree replaced)	1 full reflow per update	High paint cost	[X] Bad
React virtual DOM with selective updates	Low (only changed nodes)	Minimal reflows	Lower paint cost	[OK] Good

Rendering Pipeline

React creates a virtual copy of the UI, compares it with the previous version, and updates only the changed parts in the real DOM.

→JavaScript Execution

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout and Paint stages when many DOM nodes change

Core Web Vital Affected

INP

React affects how quickly a web page can show interactive content by efficiently updating the parts of the page that change.

Optimization Tips

1React uses a virtual DOM to minimize real DOM updates.

2Updating only changed parts reduces layout and paint costs.

3Avoid unnecessary re-renders to keep interactions fast.

Performance Quiz - 3 Questions

How does React improve page interaction speed compared to direct DOM updates?

A By using inline styles instead of CSS

B By reloading the entire page faster

C By updating only changed parts of the DOM using a virtual DOM

D By blocking user input during updates

DevTools: Performance

How to check: Record a session while interacting with the React app, then look for long scripting or layout tasks.

What to look for: Look for reduced layout and paint times during updates, indicating efficient React rendering.

Practice

1. What is React mainly used for?

easy

A. Writing server-side scripts

B. Managing databases

C. Building interactive user interfaces

D. Designing logos

Solution

1. Step 1: Understand React's purpose

   React is a tool to build parts of websites or apps that users interact with.

2. Step 2: Identify correct use case

   Among the options, only building interactive user interfaces matches React's main use.

3. Final Answer:

   Building interactive user interfaces -> Option C

4. Quick Check:

   React = interactive UI [OK]

Hint: React is for UI, not backend or design [OK]

Common Mistakes:

• Confusing React with backend frameworks
• Thinking React manages databases
• Assuming React is for graphic design

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

easy

A. component MyComponent { return Hello; }

B. function MyComponent() { return Hello; }

C. def MyComponent(): return Hello

D. class MyComponent = () => Hello;

Solution

1. Step 1: Recall React component syntax

   React components can be functions returning JSX like function MyComponent() { return <div>Hello</div>; }.

2. Step 2: Check each option

   function MyComponent() { return
   Hello; } matches the correct function component syntax. Others use invalid or non-JS syntax.

3. Final Answer:

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

4. Quick Check:

   Function component syntax = function MyComponent() { return
   Hello
   ; } [OK]

Hint: React components are functions returning JSX [OK]

Common Mistakes:

• Using Python or other language syntax
• Trying to declare components with 'component' keyword
• Incorrect arrow function syntax for components

3. What will this React component display?

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

medium

A. Hello, Anna!

B. Hello, {name}!

C. Error: name is undefined

D. Hello, !

Solution

1. Step 1: Understand JSX expression usage

   The component uses curly braces {name} to insert the variable value 'Anna' inside the <h1> tag.

2. Step 2: Predict rendered output

   The output will be <h1>Hello, Anna!</h1> as the variable is correctly used.

3. Final Answer:

   <h1>Hello, Anna!</h1> -> Option A

4. Quick Check:

   JSX {variable} inserts value =

   Hello, Anna!

   [OK]

Hint: JSX uses { } to show variable values [OK]

Common Mistakes:

• Thinking JSX shows variable names literally
• Assuming variable is undefined
• Forgetting to use curly braces for variables

4. Find the error in this React component:

function Welcome() {
  return (
    <div>
      <h1>Welcome</h2>
    </div>
  );
}

medium

A. Mismatched closing tag: </h2> instead of </h1>

B. Missing return statement

C. Function name should start with lowercase

D. JSX must be wrapped in a single tag

Solution

1. Step 1: Check JSX tags for correctness

   The opening tag is <h1> but the closing tag is </h2>, which is invalid in JSX.

2. Step 2: Confirm other parts are correct

   The return statement exists, function name is valid, and JSX is wrapped in a <div> tag.

3. Final Answer:

   Mismatched closing tag: </h2> instead of </h1> -> Option A

4. Quick Check:

   JSX tags must match exactly = Mismatched closing tag: </h2> instead of </h1> [OK]

Hint: Check opening and closing JSX tags match [OK]

Common Mistakes:

• Ignoring tag mismatch errors
• Thinking function names must be lowercase
• Missing that JSX needs one root element

5. You want to update a React component when data changes. Which React feature helps update the screen quickly?

hard

A. HTML forms

B. JSX syntax

C. CSS styling

D. Virtual DOM

Solution

1. Step 1: Understand React's update mechanism

   React uses a Virtual DOM to compare changes and update only what is needed on the screen.

2. Step 2: Identify the correct feature

   JSX is for describing UI, CSS styles appearance, HTML forms handle input, but Virtual DOM manages efficient updates.

3. Final Answer:

   Virtual DOM -> Option D

4. Quick Check:

   Fast updates = Virtual DOM [OK]

Hint: Virtual DOM speeds up UI updates [OK]

Common Mistakes:

• Confusing JSX with update mechanism
• Thinking CSS controls updates
• Assuming HTML forms handle UI refresh