React.memo, useMemo and useCallback

useMemo - The Hook returns a memoized value. React.memo - Causes React to skip rendering a component if its props have not changed. useCallback - The Hook returns a memoized callback function.

Intermediate Level Project

Custom hooks in React

React

React.memo, useMemo and useCallback

Loading video...

useMemo Hook in React (in Hindi)

Concepts

useMemo Hook in React (in Hindi)

React.memo & useCallback Hook in React (in Hindi)

Watch the full video to earn 3

Quizzes

What are the use-cases for useMemo?

useMemo is useful when you want to memoize the return value of a function that is expensive to compute.

useMemo is useful to fetch data at the time of render.

useMemo is useful to memoize a callback function that only needs to change when dependencies change.

All of the above.

None of the above.

Question 1 of 6

per question

What are the use-cases for useCallback?

useCallback is useful when you want to memoize the return value of a function that is expensive to compute.

useCallback is useful to fetch data at the time of render.

useCallback is useful to memoize a callback function that only needs to change when dependencies change.

All of the above.

None of the above.

Question 1 of 6

per question

What are differences between React.memo() and useMemo()?

React.memo() returns memoized callback function. While useMemo() is a hook that returns a memoized value from a expensive function.

React.memo() is a pure function that returns a memoized version of the component. While useMemo() is a Hook that returns a memoized value from the expensive function.

React.memo() is a pure function that returns a memoized version of the component. While useMemo() is a Hook that returns a memoized callback function.

Question 1 of 6

per question

If a function component should always render the same way given the same props, what is a simple performance optimization available for it?

Implement the shouldComponentUpdate lifecycle method.

Implement the useReducer Hook.

Implement the useMemo Hook.

Wrap it in the React.memo higher-order component.

Question 1 of 6

per question

React.memo() is a higher order component?

True

False

Question 1 of 6

per question

Your component contains:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

For a while the memoizedValue was of value 12.

After changing route your component with above code is unmounted & becomes offscreen. User decides to go back to the previous route after a while. What will happen to the memoizedValue?

It will remain 12 on render.

It may recompute the value.

It may remain the same or recompute the value.

It will recompute the value.

Question 1 of 6

per question