How to Optimize React Apps with Memoization and Custom Comparison Functions

As your React application scales, unnecessary re-renders can hurt performance. React's built-in React.memo and custom comparison functions allow you to fine-tune rendering behavior. In this guide, we'll explore how to use memoization efficiently in real-world scenarios, especially with complex props.

1. React.memo Basics

React.memo is a higher-order component that prevents re-renders when props haven't changed:

const Greeting = React.memo(function Greeting({ name }) {
  console.log("Rendered Greeting");
  return <p>Hello, {name}!</p>;
});

If the parent component re-renders but the name prop is unchanged, Greeting won’t re-render.

2. Custom Comparison Functions

When props are complex (e.g., objects or arrays), React compares them by reference. You can provide your own comparison function:

const ExpensiveComponent = React.memo(function ExpensiveComponent({ data }) {
  return <div>{data.title}</div>;
}, (prevProps, nextProps) => {
  return prevProps.data.id === nextProps.data.id;
});

This ensures re-renders only occur when necessary—even if the object reference changes but its relevant data hasn’t.

3. Memoizing Callbacks With useCallback

Passing inline functions as props can also trigger re-renders. Use useCallback to memoize them:

const handleClick = useCallback(() => {
  console.log("Clicked");
}, []);

4. Memoizing Values With useMemo

To avoid recalculating expensive operations:

const sortedData = useMemo(() => {
  return data.sort((a, b) => a.value - b.value);
}, [data]);

5. When Not to Memoize

• Components that render infrequently or are lightweight don’t benefit from memoization.
• Overusing memo can lead to more complex and harder-to-maintain code.

Pros & Cons of Memoization in React

• ✅ Pros:
  • Reduces unnecessary rendering of child components
  • Improves performance in list-heavy UIs
  • Fine-grained control via custom comparison functions
• ⚠️ Cons:
  • Can increase memory usage due to retained closures
  • Requires careful tracking of dependencies
  • Added complexity if overused

Alternatives

• Virtualization (e.g., react-window) for huge lists
• Context selectors for slicing data at consumption points
• State colocation to reduce prop drilling and renders

Conclusion

Memoization is a powerful tool for performance-sensitive React apps. When used strategically, React.memo, useCallback, and useMemo can significantly reduce re-renders without sacrificing readability.

For a much more extensive guide on getting the most out of React portals, check out my full 24-page PDF file on Gumroad. It's available for just $10:

Using React Portals Like a Pro.

If this post helped you, consider supporting me: buymeacoffee.com/hexshift