What is state in React - Performance Impact

Performance: What is state

MEDIUM IMPACT

State affects how React components update and re-render, impacting interaction responsiveness and rendering speed.

Updating component data on user input

React

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

function increment() {
  setCount(prev => prev + 3);
}

Single state update with functional form batches changes, causing only one re-render.

📈 Performance GainSingle re-render, reducing CPU usage and improving responsiveness.

Updating component data on user input

React

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

function increment() {
  setCount(count + 1);
  setTimeout(() => setCount(count + 2), 0);
}

Multiple state updates in a row using stale state cause extra re-renders and unexpected results.

📉 Performance CostTriggers 2 re-renders instead of 1, increasing CPU work and slowing interaction.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple separate state updates	Multiple DOM updates	Multiple reflows	Higher paint cost	[X] Bad
Single batched state update	Minimal DOM updates	Single reflow	Lower paint cost	[OK] Good

Rendering Pipeline

When state changes, React schedules a re-render of the component. This triggers the virtual DOM diffing, then updates the real DOM only where needed.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

→Paint

→Composite

⚠️ BottleneckDOM Updates stage is most expensive if many nodes change due to state updates.

Core Web Vital Affected

INP

State affects how React components update and re-render, impacting interaction responsiveness and rendering speed.

Optimization Tips

1Batch multiple state updates into one functional update to reduce re-renders.

2Keep state minimal and focused to avoid unnecessary DOM changes.

3Use React DevTools Profiler to monitor re-render frequency and optimize.

Performance Quiz - 3 Questions

What happens if you call multiple setState calls with stale state values in React?

A Only the last call updates the state without re-render.

B React batches them automatically with no extra cost.

C Each call causes a separate re-render, increasing CPU work.

D State updates are ignored if values are stale.

DevTools: React DevTools and Chrome Performance

How to check: Use React DevTools Profiler to record interactions and see how many times components re-render. Use Chrome Performance panel to check CPU usage and frame rate during updates.

What to look for: Look for fewer re-renders and lower CPU spikes during user input to confirm efficient state usage.

Practice

1. What is the main purpose of state in a React component?

easy

A. To create static content that never changes

B. To define the component's style and layout

C. To import external libraries into the component

D. To store data that can change and affect the component's display

Solution

1. Step 1: Understand what state represents

   State holds information that can change over time and affects what the component shows.

2. Step 2: Compare options with the definition

   Only To store data that can change and affect the component's display correctly describes state as data that changes and affects display.

3. Final Answer:

   To store data that can change and affect the component's display -> Option D

4. Quick Check:

   State = data that changes and updates UI [OK]

Hint: State holds changing data that updates the screen [OK]

Common Mistakes:

• Confusing state with styling or layout
• Thinking state is for static content
• Mixing state with importing libraries

2. Which of the following is the correct way to declare a state variable called count with initial value 0 in a React functional component?

easy

A. const count = useState(0);

B. let count = 0;

C. const [count, setCount] = useState(0);

D. var count = useState(0);

Solution

1. Step 1: Recall the useState syntax

   useState returns an array with current value and a setter function, usually destructured as [value, setValue].

2. Step 2: Check each option's syntax

   const [count, setCount] = useState(0); correctly uses array destructuring with useState(0). Options A, B, and C do not follow the correct pattern.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option C

4. Quick Check:

   useState syntax = [value, setValue] [OK]

Hint: useState returns [value, setter] array, destructure it [OK]

Common Mistakes:

• Using var or let without useState
• Not destructuring the array returned by useState
• Assigning useState directly to a single variable

3. Consider this React component code:

import React, { useState } from 'react';

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

      
Count: {count}
       setCount(count + 1)}>Increase
    
  );
}

What will be displayed after clicking the button three times?

medium

A. Count: 3

B. Count: 0

C. Count: 1

D. Count: undefined

Solution

1. Step 1: Understand initial state and button action

   Initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count increments 3 times: 0 + 3 = 3.

3. Final Answer:

   Count: 3 -> Option A

4. Quick Check:

   3 clicks increase count from 0 to 3 [OK]

Hint: Each click adds 1 to count starting from 0 [OK]

Common Mistakes:

• Thinking count resets on each click
• Confusing initial value with updated value
• Ignoring that setCount updates state asynchronously

4. What is wrong with this React state update code?

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

function increment() {
  count = count + 1;
}

medium

A. Missing initial value in useState

B. Directly modifying state variable instead of using setter

C. Using const instead of let for count

D. Setter function name is incorrect

Solution

1. Step 1: Identify how state should be updated

   React state must be updated using the setter function returned by useState, not by direct assignment.

2. Step 2: Analyze the code's mistake

   The code tries to assign directly to count, which is a constant and does not update React state.

3. Final Answer:

   Directly modifying state variable instead of using setter -> Option B

4. Quick Check:

   Use setter function to update state [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Trying to assign value directly to state variable
• Ignoring that useState returns a setter function
• Confusing const with let for state variables

5. You want to create a React component that shows a list of items and lets the user add new items. Which approach correctly uses state to update the list when a new item is added?

hard

A. Use const [items, setItems] = useState([]); and update with setItems([...items, newItem])

B. Use let items = []; and push new items with items.push(newItem)

C. Use const items = []; and reassign with items = items.concat(newItem)

D. Use const [items, setItems] = useState([]); and update with items.push(newItem)

Solution

1. Step 1: Understand state immutability in React

   State should not be mutated directly; instead, create a new array with the new item added.

2. Step 2: Check each option's update method

   Use const [items, setItems] = useState([]); and update with setItems([...items, newItem]) uses spread syntax to create a new array and calls setter, which is correct. Options A and D mutate the array directly. Use const items = []; and reassign with items = items.concat(newItem) tries to reassign a const variable.

3. Final Answer:

   Use const [items, setItems] = useState([]); and update with setItems([...items, newItem]) -> Option A

4. Quick Check:

   Update state immutably with setter [OK]

Hint: Always create new array and use setter to update state [OK]

Common Mistakes:

• Mutating state array directly with push
• Reassigning const variables
• Not using setter function to update state