React ecosystem overview - Performance & Optimization

Performance: React ecosystem overview

MEDIUM IMPACT

This affects initial page load speed, bundle size, and runtime rendering performance depending on which React ecosystem tools and libraries are used.

Adding state management to a React app

React

import { useState, useContext, createContext } from 'react';
const MyContext = createContext();
// Use React's built-in hooks and context for local state

Smaller bundle size and fewer re-renders by using React's native hooks and context for scoped state.

📈 Performance Gainsaves ~40kb bundle, reduces reflows by limiting updates to affected components

Adding state management to a React app

React

import { createStore } from 'redux';
const store = createStore(reducer);
// Using Redux everywhere with many connect() wrappers

Redux adds a large bundle size and many connected components cause frequent re-renders and reflows.

📉 Performance Costadds ~40-50kb minified to bundle, triggers multiple reflows on state updates

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy state libraries (Redux everywhere)	High (many connected components)	Multiple reflows per update	High paint cost	[X] Bad
React hooks and context for local state	Moderate (scoped updates)	Single reflow per update	Moderate paint cost	[OK] Good
Data fetching in many components	Low DOM ops	Blocks rendering until data arrives	Delays paint	[X] Bad
Server Components or React Query caching	Low DOM ops	Non-blocking rendering	Fast paint	[OK] Good
CSS-in-JS runtime styling	Low DOM ops	Triggers style recalculation on mount	Moderate paint cost	[X] Bad
Static CSS modules or Tailwind CSS	Low DOM ops	No runtime style recalculation	Low paint cost	[OK] Good

Rendering Pipeline

React ecosystem choices affect how JavaScript bundles load and execute, how many DOM nodes are created or updated, and how CSS styles are applied, impacting the browser's style calculation, layout, paint, and composite stages.

→JavaScript Parsing & Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript execution and style recalculation are the most expensive when using heavy libraries or runtime styling.

Core Web Vital Affected

LCP

This affects initial page load speed, bundle size, and runtime rendering performance depending on which React ecosystem tools and libraries are used.

Optimization Tips

1Use React hooks and context for local state instead of heavy global state libraries.

2Prefer static CSS or utility-first CSS frameworks over runtime CSS-in-JS for styling.

3Batch and cache data fetching to avoid blocking rendering and repeated network requests.

Performance Quiz - 3 Questions

Which React ecosystem choice most reduces bundle size and runtime reflows?

A Using React hooks and context for local state

B Using Redux with many connected components

C Using CSS-in-JS for styling

D Fetching data in every component separately

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load and interactions, then analyze scripting time, style recalculation, and layout shifts.

What to look for: Look for long scripting tasks, frequent style recalculations, and layout thrashing that delay Largest Contentful Paint or cause janky interactions.

Practice

1. Which of the following is NOT typically part of the React ecosystem?

easy

A. Express.js for backend server

B. Redux for state management

C. React Router for navigation

D. Styled Components for styling

Solution

1. Step 1: Identify React ecosystem tools

   React ecosystem includes tools like React Router, Redux, and Styled Components for frontend tasks.

2. Step 2: Recognize backend tools

   Express.js is a backend server framework, not part of React's frontend ecosystem.

3. Final Answer:

   Express.js for backend server -> Option A

4. Quick Check:

   Backend server ≠ React ecosystem [OK]

Hint: React ecosystem focuses on frontend tools, not backend servers [OK]

Common Mistakes:

• Confusing backend frameworks as React tools
• Thinking Redux is not part of React ecosystem
• Assuming all JavaScript libraries belong to React

2. Which syntax correctly imports the useState hook from React?

easy

A. import React.useState from 'react';

B. import useState from 'react';

C. const useState = require('react');

D. import { useState } from 'react';

Solution

1. Step 1: Recall ES module import syntax

   Named imports use curly braces: import { useState } from 'react';.

2. Step 2: Identify incorrect forms

   Default import without braces, require syntax, and dot notation in import are invalid here.

3. Final Answer:

   import { useState } from 'react'; -> Option D

4. Quick Check:

   Named import uses braces [OK]

Hint: Use curly braces for named imports like useState [OK]

Common Mistakes:

• Omitting curly braces for named imports
• Using CommonJS require in ES modules
• Trying to import with dot notation

3. What will be the output of this React component when rendered?

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

medium

A. Displays 'Count: 0' and increments count on button click

B. Displays 'Count: 1' initially and increments on click

C. Throws an error because useState is not imported

D. Button does nothing when clicked

Solution

1. Step 1: Analyze initial state value

   useState(0) sets count to 0 initially, so 'Count: 0' shows first.

2. Step 2: Understand button click behavior

   Clicking button calls setCount(count + 1), increasing count by 1 each click.

3. Final Answer:

   Displays 'Count: 0' and increments count on button click -> Option A

4. Quick Check:

   Initial state 0, button updates count [OK]

Hint: Initial useState value sets starting count [OK]

Common Mistakes:

• Assuming count starts at 1
• Forgetting to import useState
• Thinking button does not update state

4. Identify the error in this React Router usage:

import { BrowserRouter, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Route path='/home' component={Home} />
    </BrowserRouter>
  );
}

medium

A. The path prop must be inside a Switch component

B. BrowserRouter must wrap only one child element

C. Route should use 'element' prop with JSX, not 'component' prop

D. Home component must be imported from 'react-router-dom'

Solution

1. Step 1: Check React Router v6 syntax

   In React Router v6, Route uses element prop with JSX, not component.

2. Step 2: Validate other props and components

   BrowserRouter can wrap multiple children; Switch is replaced by Routes; Home is user-defined, not from react-router-dom.

3. Final Answer:

   Route should use 'element' prop with JSX, not 'component' prop -> Option C

4. Quick Check:

   React Router v6 uses element prop [OK]

Hint: Use element={} in Route for React Router v6 [OK]

Common Mistakes:

• Using component prop instead of element
• Expecting Switch component in v6
• Importing user components from react-router-dom

5. You want to fetch data from an API and style the results using the React ecosystem. Which combination of tools fits best?

hard

A. Redux for data fetching and CSS Modules for styling

B. React Query for data fetching and Tailwind CSS for styling

C. React Router for data fetching and Styled Components for styling

D. Axios for styling and React Context for data fetching

Solution

1. Step 1: Identify data fetching tools in React ecosystem

   React Query is a popular library for fetching and caching API data in React apps.

2. Step 2: Identify styling tools

   Tailwind CSS is a utility-first CSS framework commonly used with React for styling.

3. Final Answer:

   React Query for data fetching and Tailwind CSS for styling -> Option B

4. Quick Check:

   React Query + Tailwind CSS = best fit [OK]

Hint: React Query handles data; Tailwind CSS handles styling [OK]

Common Mistakes:

• Using Redux for data fetching only
• Confusing React Router as data fetch tool
• Mixing styling and data fetching roles