Fallback UI patterns in React - Performance & Optimization

Performance: Fallback UI patterns

MEDIUM IMPACT

Fallback UI patterns affect the perceived loading speed and interaction responsiveness by controlling what the user sees during data fetching or lazy loading.

Showing a loading state while fetching data or lazy loading components

React

function MyComponent() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) {
    return <div aria-busy="true" aria-label="Loading content" style={{width: '100%', height: '1rem', backgroundColor: '#eee'}}></div>;
  }
  return <div>{data.content}</div>;
}

The fallback UI is a simple, fixed-size placeholder that avoids layout shifts and reduces paint complexity.

📈 Performance GainSingle reflow, minimal paint cost, reduces CLS and improves LCP.

Showing a loading state while fetching data or lazy loading components

React

function MyComponent() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);
  if (!data) {
    return <div style={{fontSize: '2rem', fontWeight: 'bold'}}>Loading, please wait...</div>;
  }
  return <div>{data.content}</div>;
}

The fallback UI uses heavy styles and large text, causing layout shifts and longer paint times.

📉 Performance CostTriggers multiple reflows and increases CLS due to layout shifts; blocks LCP until data loads.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy styled fallback UI	Moderate DOM nodes	Multiple reflows due to size changes	High paint cost from complex styles	[X] Bad
Simple fixed-size placeholder fallback	Minimal DOM nodes	Single reflow with fixed size	Low paint cost with simple styles	[OK] Good

Rendering Pipeline

Fallback UI patterns affect the browser's rendering pipeline by controlling when and how much content is painted during loading states, impacting layout and paint stages.

→Layout

→Paint

→Composite

⚠️ BottleneckLayout is most expensive due to reflows caused by fallback UI size changes.

Core Web Vital Affected

LCP

Fallback UI patterns affect the perceived loading speed and interaction responsiveness by controlling what the user sees during data fetching or lazy loading.

Optimization Tips

1Use simple, fixed-size placeholders as fallback UI to avoid layout shifts.

2Keep fallback UI styles minimal to reduce paint cost.

3Add ARIA attributes to fallback UI for accessibility without performance cost.

Performance Quiz - 3 Questions

What is the main performance benefit of using a simple fixed-size fallback UI in React Suspense?

A It prevents layout shifts and reduces paint cost.

B It increases bundle size but improves interactivity.

C It delays the first contentful paint.

D It triggers multiple reflows to update styles.

DevTools: Performance

How to check: Record a performance profile while loading the page or component. Look for layout shifts and paint times during fallback UI display.

What to look for: Check for multiple layout recalculations and long paint durations indicating heavy fallback UI. Minimal layout and paint times indicate good fallback performance.