Jacob Paris
← Back to all content

Understanding React's useMemo

Unlike useEffect, React.useMemo does not trigger every time you change one of its dependencies.

A memoized function will first check to see if the dependencies have changed since the last render. If so, it executes the function and returns the result. If false, it simply returns the cached result from the last execution.

This is good for expensive operations like transforming API data or doing major calculations that you don't want to be re-doing unnecessarily

1const posts = Redux.useSelector((state) => state.posts)
2
3const tags = React.useMemo(() => {
4 return getTagsFromPosts(posts)
5}, [posts])
6

Further Reading

https://kentcdodds.com/blog/usememo-and-usecallback

https://stackoverflow.com/questions/54963248/whats-the-difference-between-usecallback-and-usememo-in-practice/54965033#54965033

Professional headshot

Hi, I'm Jacob

Hey there! I'm a developer, designer, and digital nomad with a background in lean manufacturing.

About once per month, I send an email with new guides, new blog posts, and sneak peeks of what's coming next.

Everyone who subscribes gets access to the source code for this website and every example project for all my tutorials.

Stay up to date with everything I'm working on by entering your email below.

Unsubscribe at any time.