Ohans Emmanuel
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:

Mastering Modulo Operator JavaScript

Mastering the modulo operator in JavaScript: A complete guide

We investigate how the modulo operator works in JavaScript and explore several real-life applications, like cyclic patterns and animations.

Timonwa Akintokun
Dec 8, 2023 ⋅ 7 min read
Ken Pickering Leader Spotlight

Leader Spotlight: Building with grit with Ken Pickering

Ken Pickering discusses the challenges associated with uncertainty and shares insights on scaling data structures and engineering teams.

Jessica Srinivas
Dec 8, 2023 ⋅ 7 min read
Understanding Solid Js Props A Complete Guide From Beginner To Advanced

Understanding SolidJS props: A complete guide

Let’s see how Solid props work to promote component reusability, exploring basic to advanced concepts for a complete understanding.

Temitope Oyedele
Dec 7, 2023 ⋅ 11 min read
Eleventy Vs. Next.js Static-Site Generation

Eleventy vs. Next.js for static site generation

We evaluate Eleventy and Next.js and compare both static site generators in terms of performance, developer experience, scalability, and ecosystem.

Nelson Michael
Dec 7, 2023 ⋅ 11 min read
View all posts

14 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=>

    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