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

Reactjs – Difference between usememo and React.memo with example

What is the difference between useMemo and React.memo? in which case the React.memo is used? and in which case the useMemo will be used? i have googled for a perfect example to show when the react.memo is used but i cant able to find

Tags:

2

Answers


  1. 0

    Both useMemo and React.memo are used for performance optimization in React applications, but they serve different purposes and are used in different scenarios.

    useMemo

    According to official docs:

    useMemo is a React Hook that lets you cache the result of a calculation between re-renders.

    You can find its usage here.

    • Skipping expensive recalculations
    • Skipping re-rendering of components
    • Memoizing a dependency of another Hook
    • Memoizing a function

    React.memo

    memo lets you skip re-rendering a component when its props are unchanged.

    You can find its usage here.

    • Skipping re-rendering when props are unchanged
    • Updating a memoized component using state
    • Updating a memoized component using a context
    • Minimizing props changes
    • Specifying a custom comparison function

    Summary

    Ultimately, useMemo is intended for memoizing values, whereas React.memo is designed for memoizing components.

    For more detailed examples, refer to the React official documentation.

    Login or Signup to reply.
  2. 0

    React.memo:

    1. Memoizes an entire functional component to prevent unnecessary re-renders.
    2. Relies on props for comparison, performs shallow comparison by default.

    useMemo:

    1. Memoizes specific computations or values within a functional component
    2. Explicitly specifies dependencies in an array
    3. Avoids expensive recalculations if dependencies haven’t changed
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search