2023-03-10
2266
#react
Ohans Emmanuel
4598
Mar 10, 2023 ⋅ 8 min read

When not to use the useMemo React Hook

Ohans Emmanuel Visit me at ohansemmanuel.com to learn more about what I do!

Recent posts:

how to use the ternary operator in javascript

How to use the ternary operator in JavaScript

Add to your JavaScript knowledge of shortcuts by mastering the ternary operator, so you can write cleaner code that your fellow developers will love.

Chizaram Ken
Feb 21, 2025 ⋅ 7 min read
Using tsup To Bundle Your TypeScript Package

Using tsup to bundle your TypeScript package

Learn how to efficiently bundle your TypeScript package with tsup. This guide covers setup, custom output extensions, and best practices for optimized, production-ready builds.

Muhammad Ali
Feb 20, 2025 ⋅ 7 min read
how to use react higher order components

How to use React higher-order components

Learn the fundamentals of React’s high-order components and play with some code samples to help you understand how it works.

Hussain Arif
Feb 20, 2025 ⋅ 10 min read
dependency inversion principle

Understanding the dependency inversion principle (DIP)

Learn about the dependency inversion principle (DIP), its importance, and how to implement it across multiple programming languages.

Samuel Olusola
Feb 20, 2025 ⋅ 8 min read
View all posts

15 Replies to "When not to use the <code>useMemo</code> React Hook"

  1. Any advice how to solve the following problem: you have a component, props has a list (say list of products) with a colour attribute. You render a list of products in a div simply:

    “`
    const MyComp(props) =>
    { props.products.map(product=>
    {product.name}
    }
    “`

    Say product.color will have just a few values. How can I avoid the creation of a ton of style objects?

  2. in the last example with the Bla function you do create the array and pass it to the useref function every single time, the way to do it is useState. if its a constant you need to create it outside of the function component or if it is being created on the first render you could use setState inside a useEffect with an emptry array as a dependency and this was it will NOT create the array every single time!

  3. First solution that comes to my mind is something like styled components which support style properties for components, if you don’t want to use that then you can just use classes for product div.

  4. This is completely okay. With useRef, the value passed in is the initialValue. It isn’t recomputed on re-render. It’s ignored.

  5. That’s correct. Should be this:

    “`
    const resolvedValue = useMemo(() => {
    return getResolvedValue(page, type)
    }, [page, type])
    “`

  6. Yeah. with useRef the first value passed is an initialiser. It is ignored on subsequent re-renders – so it’s totally fine to create a new Array there. It’s ignored on re-renders.

  7. How about the situation where useRef needs to be set with an initial value which is complex to compute? Let’s say it’s a class member constructing which takes memory and time – so why do I need to create the new one on each rerender if I only need the very first one?

  8. Hi! Thanks for your nice article.
    Can I translate this article into Korean and upload to my blog?
    Of course I’m gonna write the source. 🙂

    1. Hi @youjin, LogRocket editor here. For now, our policy is that we do not approve translations on third-party sites. We appreciate the support, though.

  9. Many of these posts are not correct – “You may rely on useMemo as a performance optimization, not as a semantic guarantee.” is directly in the post. You’re suggesting the use of useMemo, like the places you’re attempting to stop re-triggers on prop changes (mounting an attribution event or something), as a semantic guarantee.

Leave a Reply