Functional components in React - Performance & Optimization

Performance: Functional components

MEDIUM IMPACT

This affects initial page load speed and interaction responsiveness by how React renders and updates UI components.

Creating a simple UI component in React

React

function Button({ label }) {
  return <button>{label}</button>;
}

Functional components are simpler, use less memory, and React can optimize rendering better.

📈 Performance GainReduces memory usage and speeds up rendering by avoiding class instance overhead

Creating a simple UI component in React

React

class Button extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

Class components have more boilerplate and React must create an instance, which adds overhead.

📉 Performance CostAdds extra memory for instances and slower updates due to lifecycle methods

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Class component with instance	More nodes due to lifecycle wrappers	Multiple reflows if state changes trigger full re-renders	Higher paint cost due to extra DOM updates	[X] Bad
Functional component with hooks	Minimal nodes, direct function calls	Single reflow per state change	Lower paint cost due to optimized updates	[OK] Good

Rendering Pipeline

Functional components are called as functions during React's render phase. React compares the returned elements to the previous render to update the DOM efficiently.

→JavaScript Execution

→Virtual DOM Diffing

→DOM Updates

→Paint

⚠️ BottleneckJavaScript Execution and Virtual DOM Diffing when many components re-render unnecessarily

Core Web Vital Affected

INP

This affects initial page load speed and interaction responsiveness by how React renders and updates UI components.

Optimization Tips

1Use functional components to reduce memory and lifecycle overhead.

2Memoize callbacks and values to avoid unnecessary re-renders.

3Keep components small and focused to minimize JavaScript work.

Performance Quiz - 3 Questions

Why do functional components generally improve interaction responsiveness compared to class components?

A They avoid creating class instances and lifecycle overhead

B They use more memory which speeds up rendering

C They block the main thread longer to batch updates

D They force full page reloads on state changes

DevTools: React DevTools and Performance panel

How to check: Open React DevTools Profiler, record interactions, and observe component render counts and durations. Use Performance panel to see JS execution and paint times.

What to look for: Look for fewer component re-renders and shorter JS execution times indicating efficient functional component usage