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:

Why Go wasn’t the right choice for the TypeScript compiler

Why Go wasn’t the right choice for the TypeScript compiler

The switch to Go may be a pragmatic move in the short term, but it risks alienating the very developers who built the tools that made TypeScript indispensable in the first place.

Muhammed Ali
May 8, 2025 ⋅ 4 min read
how and when to use type casting in TypeScript

How and when to use type casting in TypeScript

Discover the basics and advanced use cases of type casting, how and why to use it to fix type mismatches, and gain some clarity on casting vs. assertion.

Paul Akinyemi
May 8, 2025 ⋅ 14 min read

How to format dates in JavaScript: Methods, libraries, and best practices

JavaScript date handling can be tough. Here are some native Date API tools and specialized libraries to tackle them with.

Nelson Michael
May 8, 2025 ⋅ 8 min read
tailwind typography

How to use the Tailwind Typography plugin

Walk you through how to set up and use the Tailwind Typography plugin, also known as the @tailwindcss/typography or the prose plugin.

David Omotayo
May 7, 2025 ⋅ 7 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