Question 175883 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Should I use useMemo to wrap components delivered as props in React composition pattern?

Our React project has a code written in Composition Pattern as below.

return (
  <Template
    title={
      useMemo(
        () => (
         <>
           <TitleComponent prop={value} />
           <TitleComponent prop={value} />
         </>
         ),
        [deps]
      )
    }
  />
)

I didn’t apply useMemo to TitleComponent at first. According to this article, I thought it would be optimized just by delivering components to prop.

However, my colleague argues that it is better to use useMemo because if you apply useMemo, you can skip the render phase. Otherwise, he claim that only the commit phase is skipped.

  1. Is it true that render phase runs if useMemo is not used in the code above?
  2. Is it useful to wrap prop components in useMemo?
  • I editted my code. There were multiple components wrapped with fragment in prop.
Tags:

3

Answers


  1. 0

    firstly, useMemo is useful if it takes time to rerender, otherwise it won’t change anything.

    If you don’t use it:

    • If the Template component rerenders, the title wont
    • If the Parent component that returns Template rerenders, the title and Template will rerender as well

    If you use it:

    • If the Template component rerenders, the title wont
    • If the Parent component that returns Template rerenders, the Template will rerender as well, but the title will rerender only if there is difference in the dependency array

    This thing <Component ... /> returns an object (React calls createElement and it returns an object).

    • Render happens when the Component is different than the previous Component.
    • Rerender happens when the returned object from React.createElement is different (by reference) than the other one from previous render
    Login or Signup to reply.
  2. 0

    I’m not going to answer your questions since I think you’re confused on what really is the purpose of that hook. Instead I’ll give you a better understanding on it.

    useMemo is used when you have a very heavy computation inside a component. What that hook does is, it takes a state/props as dependencies and it wont re-execute the computations unless those dependencies change. Meaning if you have a component that does very heavy computations on render that causes your app to slow down, you need to wrap the computation inside a useMemo to prevent recomputing your heavy calculations during rerender. In your case, do you have heavy computation on that title component? Absolutely NOT. So you are using that hook wrong.

    What you need is React.memo. This one will convert your component into PureComponent which will skip unnecessary rerenders if your component only displays static content that doesn’t change.

    Login or Signup to reply.
  3. 0

    Is always nice to try using useMemo.

    What it does: It memoize your component/data and rerender when any variable of the dependencies array changes. So when any other state variable changes react will not have to rerender this memoized component improving performance.

    Some use cases are:

    • When you have a heavy calculation in your component or variable
    • To prevent refetch same data in APIs

    Here’s a little example of how to use it:

    const [myVar, setMyVar] = useState<string>('abc')
const [myOtherVar, setMyOtherVar] = useState<number>(123)

return useMemo(() => (<>

  <div>Memoized: { myVar }</div>

  <div> Not memoized: {myOtherVar} </div>

</>),[myVar])

    What is it doing here?

    When you change myVar value using setMyVar react will rerender the component to update it’s content in dom.

    But if you change myOtherVar value with setMyOtherVar react will not rerender the component and it’s value will not be updated in dom.

    PS: If you change myOtherVar and after this you change myVar both values will be updated in dom because the rerender was done after updating the unmemoized variable so react will take all updated values of all variables.

    Here‘s a simple codesandbox working example

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search