How and When to Optimize Components in React and Redux

Written by
Last updated on:
October 1, 2025
Written by
Last updated on:
October 1, 2025

If you have ever had a function that brought your app to a stuttering halt, you may have realized that there is only so much you can do to optimize the function yourself.

However, one way that you can easily optimize a function is by caching values that frequently rendering components use. This is exactly what React’s useMemo and reselect do to improve performance.

Using useMemo

useMemo is a React hook that memoizes a function’s return value by taking two parameters: a function and a dependency array.

const value = useMemo(() => expensiveFunction(paramA, paramB), [paramA, paramB]);

It works by remembering the value returned based on the dependencies you pass --- normally the function’s parameters --- and returning that value if it was already processed and still cached in memory.

But when is the right time to use this? Should you spam it on every function that might be a tad complex? No, caching and evaluating dependencies still takes CPU time and memory for caching the values, especially if they’re large or frequently changing. This could cause no performance difference at all or make it even worse. You should only use this in cases where performance is noticeably impacted, otherwise, you could just end up hindering performance rather than improving it.

How Redux helps optimize performance by preventing rerenders

Redux’s mapStateToProps gets called every time a dispatch happens, so they’re frequently called. It uses the results of these calls to determine whether or not a rerender needs to happen based on doing a shallow check on the returned props vs the previous props. This leads us to two things. First, make sure your selectors are consistent and not prone to changing when unnecessary to prevent rerenders. Second, your selectors and any other calculations you do in mapStateToProps need to be performant.

There are two things you can do to help performance during these calls to mapStateToProps. The first thing is to move any unnecessary or expensive calculations for props to the containers themselves and use useMemo as necessary such as in the example below.

const mapStateToProps = (state) => ({
 propOne: getPropOne(state),
 propTwo: getPropTwo(state),
 unnecessaryProp: fibonacciSequence(),
})

The second leads us into the third and final part: reselect.

Reselecting selectors

Reselect is a great tool for creating, organizing, and automatically optimizing selectors. It works by allowing you to easily compose selectors together, extracting common selector logic into base selectors, and then using those selectors in your primary selectors.

export const exampleSelector = createSelector(
 otherSelector,
 anotherSelector,
 (other, another) =>
 other
     .map(({ type: otherType }) =>
       another.find(
         ({ type: anotherType}) => anotherType === otherType
       )
     )
     .filter((value) => value !== undefined)
);

With selectors, you’re commonly filtering, sorting, mapping, etc. large sets of data. These are expensive operations that should often be memoized just like in useMemo. Reselect already handles this: every selector you make with the create selector is memoized with a shallow equality comparison of the passed state or result of prior selectors. This can give an application a decent speed boost without doing anything else if not already memoizing selectors.

Check out our React developers page, and if you’re interested, explore our career opportunities.

Learn more

Custom Software Development

Frequently Asked Questions

useMemo is best used when you have expensive calculations that run during rendering and depend on specific values. It caches the computed result and only recalculates when its dependencies change, helping prevent unnecessary work. However, overusing it can hurt performance since caching itself uses memory and CPU resources. Reserve useMemo for scenarios where the performance benefit is measurable and significant.

‍

Redux uses shallow equality checks in mapStateToProps to determine whether components need to rerender when the state changes. If selectors or returned props are inconsistent, even minor changes can trigger extra updates. By keeping selectors stable and minimizing unnecessary recalculations, you can significantly reduce wasted renders and improve app performance.

Reselect provides a simple way to memoize selectors in Redux, ensuring expensive data transformations—like filtering, sorting, and mapping—aren’t recalculated unnecessarily. By composing smaller, reusable selectors into larger ones, Reselect keeps your state calculations efficient. Since it automatically performs shallow equality checks, your app only recomputes values when the inputs change.

‍

The most effective approach is to avoid doing heavy computations directly within mapStateToProps. Instead, move those calculations into memoized selectors using Reselect or wrap them in useMemo at the component level. This approach keeps state mapping lightweight and ensures your components only rerender when absolutely necessary.

React handles rendering optimization at the component level, while Redux manages state efficiently—but combining them with tools like useMemo and Reselect can take performance further. Memoized selectors reduce unnecessary recalculations, and React hooks help limit re-renders for components that don’t need updates. Together, they ensure a smoother, faster app experience, especially in data-heavy applications.