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