Cut Unnecessary Computations for Efficient React Apps

READ TIME - 3 MINUTES

Today, let’s dive into how to use useCallback and useMemo to avoid unnecessary computations when filtering a list of items in React. It’s a simple trick, but it can make a huge difference.

In some interactive apps, the fewer renders, the better... (performance :)). These hooks let us control when stuff updates, helping things run smoother.

A lot of folks throw these hooks on without really needing them, or they put them in the wrong spot, sometimes making things slower instead of faster. Here, we’ll focus on when they help.

Why React Caching Can Speed Things Up

Every time your component re-renders, React recreates any functions or values inside it. This can get expensive if you’re doing it a lot. useCallback and useMemo let us hold onto those functions and values so they only change when we need them to, saving us a ton of extra computations.

Takeaways

• useCallback prevents functions from being remade in each render. This is great for useEffect dependencies and passing functions as props.

• useMemo locks in computed values so they don’t recalculate unless necessary. Super handy for expensive calculations.

• They're a big help when passing props down or working with heavy computations.

The Problem: Filtering Items Again and Again

Imagine we’ve got a ParentComponent that lists items and a search bar to filter them. We’re passing a function to filter items based on what we type, and that function gets called every single render. Ideally, we want to avoid that repetitive filtering.

Example: Cleaning Up with useCallback and useMemo

1. Without useCallback or useMemo

Here’s a simple setup:

ParentComponent has a list of items and a search input. We’re passing a filter function down to ChildComponent:

And here’s ChildComponent, displaying the filtered list:

Every time ParentComponent re-renders, it recreates filterItems, which causes ChildComponent to execute the filterItems function again, even if the filtered list hasn’t changed.

2. Optimizing with useCallback and useMemo

Now, let’s fix that. We’ll use useCallback to keep filterItems from being recreated on each render, so it only changes if searchTerm changes. Then, in ChildComponent, we’ll wrap the filtering process in useMemo to avoid recalculating the list unless we need to:

And in ChildComponent, we’ll use useMemo to make sure filteredItems only changes if searchTerm changes:

Now, ChildComponent re-renders only when searchTerm changes, keeping things snappy by skipping unnecessary calculations.

Takeaways

useMemo shines when you’re doing something intensive, like a big calculation or data processing. By using useMemo, that calculation only runs when the searchTerm changes, sparing your app from doing a lot of redundant work every render.

In real-world apps, components can re-render anytime a higher-level component updates. So, setting it up this way means that filteredItems will only re-calculate the list if the data it cares about changes, improving the app's performance if you have a heavy calculation in your case.

Conclusion

So, that’s how useCallback and useMemo can boost your component efficiency. They’re a big help when passing functions around or doing heavy calculations. Using them wisely will make your app feel faster and smoother!

See you next Saturday!

Keep up the great work! :)