The React Trick That Boosts Performance by 300%! 15 Hacks You Need to Know

React is a powerful JavaScript library for building user interfaces, but as your applications grow in complexity, maintaining smooth…

Anshul Laddha

~8 min read · December 1, 2024 (Updated: December 2, 2024) · Free: No

React is a powerful JavaScript library for building user interfaces, but as your applications grow in complexity, maintaining smooth performance becomes a challenge. Whether you're working on a small project or a large-scale web app, optimizing React's performance is crucial for a better user experience. Fortunately, there are several tricks you can use to boost performance by up to 300%. In this post, we'll explore 15 performance optimization tips for React functional components, along with in-depth explanations and examples to show you how to use them effectively.

1. Memoize Components with `React.memo()`

React's React.memo() is a higher-order component (HOC) that prevents unnecessary re-renders of functional components by memoizing them. If the props don't change, the component is not re-rendered.

Why Use It?

When a component's output depends only on its props, memoizing it prevents unnecessary re-renders, improving performance.

Example:

import React, { useState } from 'react';
// Memoizing the component
const ExpensiveComponent = React.memo(({ value }) => {
  console.log('Rendering ExpensiveComponent');
  return <div>{value}</div>;
});
const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [otherCount, setOtherCount] = useState(0);
  return (
    <div>
      <ExpensiveComponent value={count} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setOtherCount(otherCount + 1)}>Increment Other Count</button>
    </div>
  );
};
export default ParentComponent;

How It Helps:

ExpensiveComponent re-renders only when value changes, not when otherCount changes.

2. Use `useMemo()` for Expensive Calculations

useMemo() allows you to memoize the result of an expensive calculation so that it's only recomputed when the dependencies change.

Why Use It?

When performing expensive calculations (e.g., filtering large lists), memoizing the result avoids unnecessary recomputation on every render.

Example:

import React, { useMemo, useState } from 'react';
const ExpensiveCalculation = ({ numbers }) => {
  const sortedNumbers = useMemo(() => {
    console.log('Sorting numbers...');
    return numbers.sort((a, b) => a - b);  // Expensive operation
  }, [numbers]);
  return <ul>{sortedNumbers.map((num) => <li key={num}>{num}</li>)}</ul>;
};
const App = () => {
  const [numbers, setNumbers] = useState([3, 1, 2]);
  const [otherState, setOtherState] = useState(false);
  return (
    <div>
      <ExpensiveCalculation numbers={numbers} />
      <button onClick={() => setNumbers([5, 7, 8])}>Change Numbers</button>
      <button onClick={() => setOtherState(!otherState)}>Toggle State</button>
    </div>
  );
};
export default App;

How It Helps:

The sorting operation only re-runs when numbers change, not when otherState changes, improving performance.

3. Avoid Inline Functions in JSX

Inline functions in JSX create new function references on every render, which can lead to unnecessary re-renders.

Why Use It?

Inline functions are not memoized, causing components that receive them as props to re-render unnecessarily.

Example:

// Bad Example: Inline function inside JSX
const Button = () => <button onClick={() => console.log('Clicked!')}>Click Me</button>;
// Better Example: Define the function outside JSX
const handleClick = () => console.log('Clicked!');
const Button = () => <button onClick={handleClick}>Click Me</button>;

How It Helps:

The second approach prevents the creation of new function references on every render, improving performance.

4. Use `React.lazy()` and `Suspense` for Code Splitting

React's React.lazy() allows you to load components dynamically. By splitting your code, you can only load the components when they're needed, which reduces the initial load time.

Why Use It?

Code-splitting allows you to load less JavaScript at the start, making the app more responsive and faster to load.

Example:

import React, { Suspense } from 'react';
// Lazy load the component
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));
const App = () => (
  <div>
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  </div>
);
export default App;

How It Helps:

HeavyComponent is only loaded when it's needed, thus reducing the initial bundle size and improving performance.

5. Use `useCallback()` for Event Handlers

useCallback() memoizes event handlers so that they're not recreated every time the component renders. This is especially useful when you pass functions to child components.

Why Use It?

It helps to prevent unnecessary re-renders of child components that receive the function as a prop.

Example:

import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick }) => {
  console.log('Rendering Button');
  return <button onClick={onClick}>Click Me</button>;
});
const App = () => {
  const [count, setCount] = useState(0);
  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return (
    <div>
      <Button onClick={increment} />
      <p>{count}</p>
    </div>
  );
};
export default App;

How It Helps:

The increment function is memoized and only re-created when count changes, preventing unnecessary re-renders of the Button.

6. Optimize `useContext()` to Avoid Unnecessary Renders

Context in React can cause unnecessary re-renders when the value changes, affecting all consumers. Using useMemo() to memoize the context value can help prevent this.

Why Use It?

It avoids re-renders of components that don't need to update when the context value changes.

Example:

import React, { createContext, useState, useMemo } from 'react';
// Creating context
const AppContext = createContext();
const ParentComponent = () => {
  const [value, setValue] = useState(0);
  const memoizedValue = useMemo(() => value, [value]);
  return (
    <AppContext.Provider value={memoizedValue}>
      <ChildComponent />
      <button onClick={() => setValue(value + 1)}>Increment Value</button>
    </AppContext.Provider>
  );
};
const ChildComponent = () => {
  const contextValue = React.useContext(AppContext);
  return <div>{contextValue}</div>;
};
export default ParentComponent;

How It Helps:

By memoizing value, we prevent unnecessary re-renders of ChildComponent when the context value doesn't change.

7. Use `React.Fragment` Instead of Wrapper Elements

Unnecessary wrapper elements (like divs) can increase the DOM size and decrease performance. React.Fragment allows you to group elements without adding extra nodes to the DOM.

Why Use It?

It helps keep the DOM tree clean, reducing unnecessary elements in the virtual DOM.

Example:

// Bad Example: Using unnecessary divs
const Component = () => (
  <div>
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
);
// Good Example: Using React.Fragment
const Component = () => (
  <>
    <div>Item 1</div>
    <div>Item 2</div>
  </>
);

How It Helps:

Using React.Fragment reduces the DOM size and improves rendering efficiency.

8. Avoid Prop Drilling with `useReducer()`

When props are passed down several levels, performance can be affected due to the re-renders triggered by state changes. useReducer() allows you to manage complex state more efficiently.

Why Use It?

It can help avoid unnecessary prop drilling and reduce the number of re-renders.

Example:

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}
const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
    </div>
  );
};
export default Counter;

How It Helps:

useReducer() helps centralize state logic, reducing unnecessary prop passing and improving performance.

**9

. Avoid Using setState() Inside useEffect() Unnecessarily**

Calling setState() within useEffect() without proper dependencies can lead to infinite re-renders. Always ensure the dependencies are correctly set to avoid unnecessary state updates.

Why Use It?

It helps prevent unnecessary re-renders caused by useEffect() state updates.

Example:

import React, { useState, useEffect } from 'react';
const App = () => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // Empty dependency array ensures effect runs only once
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};
export default App;

How It Helps:

By providing an empty dependency array ([]), we ensure that setData() is called only once after the initial render, preventing unnecessary re-renders.

10. Batch Multiple State Updates

React batches multiple state updates that occur within the same event handler into a single re-render. Avoid making separate state updates if they can be batched together.

Why Use It?

It reduces the number of re-renders triggered by multiple state updates.

Example:

const App = () => {
  const [state1, setState1] = useState(0);
  const [state2, setState2] = useState(0);
  const handleClick = () => {
    setState1(state1 + 1);
    setState2(state2 + 1);
  };
  return <button onClick={handleClick}>Increment</button>;
};

How It Helps:

React batches the updates to state1 and state2 in a single re-render.

11. Use `useLayoutEffect()` Instead of `useEffect()` When Working with DOM

useLayoutEffect() is similar to useEffect(), but it runs synchronously after all DOM mutations. Use it for DOM measurements and updates that need to occur before the browser paints.

Why Use It?

It ensures that DOM manipulations are done before the browser paints, leading to smoother UI updates.

Example:

import React, { useLayoutEffect, useState, useRef } from 'react';
const App = () => {
  const [width, setWidth] = useState(0);
  const divRef = useRef(null);
  useLayoutEffect(() => {
    setWidth(divRef.current.getBoundingClientRect().width);
  }, []);
  return (
    <div>
      <div ref={divRef}>Width: {width}</div>
    </div>
  );
};
export default App;

How It Helps:

useLayoutEffect ensures the width is calculated before the browser paints, resulting in smoother transitions and preventing layout shifts.

12. Use Server-Side Rendering (SSR) or Static Site Generation (SSG)

For React applications that need to be SEO-friendly or have fast initial loads, SSR or SSG can significantly improve the time-to-interactive (TTI).

Why Use It?

SSR and SSG can render React components on the server before sending the HTML to the browser, leading to faster loading times.

Example:

Next.js provides built-in SSR and SSG features.

// Example of SSR in Next.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}
const Page = ({ data }) => <div>{data}</div>;

How It Helps:

SSR and SSG reduce the time it takes to load and render the content, improving performance, especially for first-time visitors.

13. Use Throttling for Expensive Events

For events like scrolling or resizing, you can use throttling to limit how often a function is executed, reducing unnecessary performance overhead.

Why Use It?

Throttle functions to execute at most once every X milliseconds, reducing redundant calculations during events like scrolling.

Example:

import React, { useEffect } from 'react';
const handleScroll = () => {
  console.log('Scroll Event');
};
const App = () => {
  useEffect(() => {
    const throttleScroll = throttle(handleScroll, 200); // Execute at most once every 200ms
    window.addEventListener('scroll', throttleScroll);
    return () => {
      window.removeEventListener('scroll', throttleScroll);
    };
  }, []);
  return <div style={{ height: '2000px' }}>Scroll Me</div>;
};
// Throttle function
function throttle(func, delay) {
  let timeout;
  return function () {
    if (!timeout) {
      timeout = setTimeout(() => {
        func();
        timeout = null;
      }, delay);
    }
  };
}
export default App;

How It Helps:

The scroll event handler is throttled, so it doesn't fire continuously, improving performance.

14. Use Web Workers for Heavy Tasks

If your application performs complex calculations or data processing, offload those tasks to a Web Worker to keep the UI responsive.

Why Use It?

Web Workers allow you to run JavaScript in the background without blocking the UI thread.

Example:

const worker = new Worker('/worker.js');  // Worker file
worker.onmessage = (e) => {
  console.log('Worker Response:', e.data);
};
worker.postMessage('startTask');

How It Helps:

Heavy computations are offloaded to a background thread, keeping the main thread responsive.

15. Use PureComponent (Class Component)

If you are using class components, React.PureComponent performs a shallow comparison of props and state. It re-renders only when those values change.

Why Use It?

It can prevent unnecessary re-renders, improving performance for components with frequent state or prop changes.

Example:

import React, { PureComponent } from 'react';
class MyComponent extends PureComponent {
  render() {
    return <div>{this.props.data}</div>;
  }
}
export default MyComponent;

How It Helps:

PureComponent optimizes rendering by performing a shallow prop and state comparison.

Conclusion

Performance optimization in React is crucial for building fast, scalable applications. By applying the 15 tricks above, you can dramatically improve your app's rendering performance and responsiveness. From memoizing components and lazy loading to code-splitting and throttling events, each of these techniques can help make your React app up to 300% faster.

Start applying these techniques today and experience a huge performance boost in your React apps! 🚀

#reactjs #react #javascript #front-end-development

< Go to the original

The React Trick That Boosts Performance by 300%! 15 Hacks You Need to Know

React is a powerful JavaScript library for building user interfaces, but as your applications grow in complexity, maintaining smooth…

1. Memoize Components with React.memo()

Why Use It?

Example:

How It Helps:

2. Use useMemo() for Expensive Calculations

Why Use It?

Example:

How It Helps:

3. Avoid Inline Functions in JSX

Why Use It?

Example:

How It Helps:

4. Use React.lazy() and Suspense for Code Splitting

Why Use It?

Example:

How It Helps:

5. Use useCallback() for Event Handlers

Why Use It?

Example:

How It Helps:

6. Optimize useContext() to Avoid Unnecessary Renders

Why Use It?

Example:

How It Helps:

7. Use React.Fragment Instead of Wrapper Elements

Why Use It?

Example:

How It Helps:

8. Avoid Prop Drilling with useReducer()

Why Use It?

Example:

How It Helps:

**9

Why Use It?

Example:

How It Helps:

10. Batch Multiple State Updates

Why Use It?

Example:

How It Helps:

11. Use useLayoutEffect() Instead of useEffect() When Working with DOM

Why Use It?

Example:

How It Helps:

12. Use Server-Side Rendering (SSR) or Static Site Generation (SSG)

Why Use It?

Example:

How It Helps:

13. Use Throttling for Expensive Events

Why Use It?

Example:

How It Helps:

14. Use Web Workers for Heavy Tasks

Why Use It?

Example:

How It Helps:

15. Use PureComponent (Class Component)

Why Use It?

Example:

How It Helps:

Conclusion

Reporting a Problem

1. Memoize Components with `React.memo()`

2. Use `useMemo()` for Expensive Calculations

4. Use `React.lazy()` and `Suspense` for Code Splitting

5. Use `useCallback()` for Event Handlers

6. Optimize `useContext()` to Avoid Unnecessary Renders

7. Use `React.Fragment` Instead of Wrapper Elements

8. Avoid Prop Drilling with `useReducer()`

11. Use `useLayoutEffect()` Instead of `useEffect()` When Working with DOM