What are the ways to optimize a React application?

Brief Answer

Main ways to optimize React applications:

1. React.memo — prevents unnecessary component re-renders 🚫🔄
2. useMemo — remembers calculations, doesn’t repeat them unnecessarily 🧠
3. useCallback — saves functions, doesn’t create new ones 🔁
4. Lazy loading — loads only needed parts of the application 📦
5. List virtualization — renders only visible elements 👁️

// Optimization examples:
// React.memo for components
// useMemo for heavy calculations  
// useCallback for functions
// lazy for code splitting

Full Answer

Optimizing a React application is like cleaning a room: remove unnecessary things, organize, and everything works faster! 🧹⚡

React.memo — don’t re-render unnecessarily

React.memo is like a filter that blocks useless re-renders:

// Component re-renders only if props changed
const MyComponent = React.memo(({title, count}) => {
  return <div>{title} {count}</div>;
});

When to use:

• Component re-renders frequently
• Props rarely change
• Component is “heavy” to render

useMemo — don’t calculate twice

useMemo is like a calculator with memory, remembers the result:

// Heavy calculations done only when needed
const expensiveValue = useMemo(() => {
  return heavyCalculation(data);
}, [data]);

When to use:

• Heavy calculations
• Filtering/sorting large arrays
• Creating complex objects

useCallback — don’t create unnecessary functions

useCallback is like a function storage, doesn’t create new ones each time:

// Function created once and saved
const handleClick = useCallback(() => {
  doSomething();
}, []);

When to use:

• Functions passed to React.memo components
• Functions in useEffect dependencies
• Event handlers in lists

Lazy Loading — load on demand

Lazy loading is like streaming: loads only what’s needed now:

// Component loads only when needed
const LazyComponent = lazy(() => import('./HeavyComponent'));

Benefits:

• Smaller initial bundle size
• Faster first load
• Traffic savings

List Virtualization — render only visible

Virtualization is like a train window: you see only what’s nearby:

// Renders only visible list elements
// Others load when scrolling

When to use:

• Lists with 100+ elements
• Heavy list elements
• Infinite lists

Code Splitting — divide into parts

Code splitting is like a book by chapters: loads by need:

// Different app parts in different files
// Load only when navigating to page

Benefits:

• Faster app startup
• Less memory usage
• Easier to develop

Rendering Optimization

Avoid anonymous functions

// ❌ Bad — new function every render
<button onClick={() => doSomething()}>Button</button>
 
// ✅ Good — same function always
const handleClick = useCallback(() => doSomething(), []);
<button onClick={handleClick}>Button</button>

Move heavy objects out

// ❌ Bad — object created every time
<List data={{filter: 'active', sort: 'name'}} />
 
// ✅ Good — object doesn't change
const listConfig = useMemo(() => ({
  filter: 'active',
  sort: 'name'
}), []);
<List data={listConfig} />

Common Mistakes

Optimizing everything

// ❌ Mistake — optimization not always needed
const SimpleComponent = React.memo(() => <div>Just text</div>);
 
// ✅ Correct — optimize only "heavy" things
const HeavyComponent = React.memo(({data}) => {
  // Complex render
});

Forgetting dependencies

// ❌ Mistake — forgot dependency
const value = useMemo(() => calculate(a), []); // a not in list!
 
// ✅ Correct — all dependencies listed
const value = useMemo(() => calculate(a), [a]);

Simple Rules

1. React.memo — for components that re-render frequently 🚫🔄
2. useMemo — for heavy calculations and objects 🧠
3. useCallback — for functions passed down 🔁
4. Lazy loading — for code splitting 📦
5. Virtualization — for large lists 👁️
6. Measure — find bottlenecks first, then optimize 🔍

Proper React application optimization makes them faster and more pleasant to use! 💪

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪