React.memo and useMemo in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is React.memo used for in React Native?

React.memo is a higher-order component that helps prevent unnecessary re-rendering of a component by memoizing it. It only re-renders the component if its props change.

beginner

Explain useMemo hook in React Native.

useMemo is a React hook that memoizes the result of a function. It recomputes the value only when its dependencies change, helping to avoid expensive calculations on every render.

intermediate

How does React.memo differ from useMemo?

React.memo memoizes a whole component to avoid re-rendering when props are unchanged. useMemo memoizes a value or calculation inside a component to avoid recalculating it on every render.

beginner

When should you use React.memo in your React Native app?

Use React.memo when you have a functional component that renders the same output for the same props and you want to avoid unnecessary re-renders to improve performance.

intermediate

Give an example of a situation where useMemo is helpful.

useMemo is helpful when you have a heavy calculation or data processing inside a component that should only run when specific inputs change, like filtering a large list based on user input.

What does React.memo do?

A Manages component state

B Memoizes a value inside a component

C Creates a new component

D Prevents a component from re-rendering if its props haven't changed

React.memo wraps a component and skips re-rendering if the props are the same.

Which hook is used to memoize a calculation inside a component?

A useState

B useEffect

C useMemo

D useCallback

useMemo memoizes the result of a function to avoid recalculating it on every render.

When does useMemo recompute its value?

A Every time the component renders

B Only when its dependencies change

C Never

D When the component unmounts

useMemo recomputes the memoized value only when one or more dependencies change.

React.memo is best used for:

A Preventing unnecessary re-renders of a component

B Memoizing a function inside a component

C Managing side effects

D Updating state

React.memo helps avoid re-rendering a component when props are unchanged.

Which of these is NOT a benefit of using useMemo?

A Preventing component re-renders

B Improving render performance

C Memoizing computed values

D Avoiding expensive recalculations

useMemo memoizes values but does not prevent component re-renders.

Describe how React.memo helps improve performance in React Native apps.

Think about when a component re-renders and how React.memo can avoid it.

Explain a scenario where you would use useMemo inside a React Native component.

Consider filtering or sorting large data sets.

Practice

1. What is the main purpose of React.memo in React Native?

easy

A. To manage component state

B. To prevent a component from re-rendering if its props have not changed

C. To fetch data from an API

D. To memorize a value between renders

Solution

1. Step 1: Understand React.memo's role

   React.memo is a higher-order component that caches the rendered output of a component.

2. Step 2: Identify its effect on re-rendering

   It skips re-rendering if the component's props have not changed, improving performance.

3. Final Answer:

   To prevent a component from re-rendering if its props have not changed -> Option B

4. Quick Check:

   React.memo = skip re-render if props unchanged [OK]

Hint: React.memo skips re-render when props stay the same [OK]

Common Mistakes:

• Confusing React.memo with useMemo
• Thinking React.memo manages state
• Believing React.memo fetches data

2. Which of the following is the correct syntax to use useMemo in a React Native functional component?

easy

A. const memoizedValue = useMemo(computeValue(), dependencies);

B. const memoizedValue = useMemo(computeValue, dependencies);

C. const memoizedValue = useMemo(() => computeValue, dependencies);

D. const memoizedValue = useMemo(() => computeValue(), [dependencies]);

Solution

1. Step 1: Recall useMemo syntax

   useMemo takes a function returning a value and an array of dependencies.

2. Step 2: Match correct syntax

   const memoizedValue = useMemo(() => computeValue(), [dependencies]); correctly uses an arrow function and dependency array.

3. Final Answer:

   const memoizedValue = useMemo(() => computeValue(), [dependencies]); -> Option D

4. Quick Check:

   useMemo syntax = function + dependencies array [OK]

Hint: useMemo needs a function and dependency array [OK]

Common Mistakes:

• Passing dependencies without array brackets
• Calling computeValue immediately instead of in a function
• Omitting the arrow function wrapper

3. Given the code below, what will be logged when MyComponent re-renders with the same count prop?

const MyComponent = React.memo(({ count }) => {
  console.log('Rendered');
  return {count};
});

medium

A. Rendered logged once

B. Rendered logged twice

C. No logs

D. Error due to duplicate components

Solution

1. Step 1: Understand React.memo behavior on same props

   React.memo skips re-render if props are unchanged, so the component renders only once.

2. Step 2: Analyze console.log calls

   React.memo prevents re-rendering when props are the same on subsequent renders. Thus, 'Rendered' is logged only once, on the initial render.

3. Final Answer:

   Rendered logged once -> Option A

4. Quick Check:

   React.memo skips re-render = one log [OK]

Hint: React.memo skips re-render if props unchanged, so one log [OK]

Common Mistakes:

• Assuming component renders twice
• Thinking React.memo disables all rendering
• Confusing prop changes with state changes

4. Identify the error in this React Native code using useMemo:

const memoizedValue = useMemo(computeValue(), [dependency]);

medium

A. computeValue is called immediately instead of being passed as a function

B. Dependency array should be empty

C. useMemo cannot be used in functional components

D. Missing import of useMemo

Solution

1. Step 1: Check how useMemo expects its first argument

   useMemo expects a function, not the result of a function call.

2. Step 2: Identify the mistake in the code

   computeValue() is called immediately; it should be wrapped in a function like () => computeValue().

3. Final Answer:

   computeValue is called immediately instead of being passed as a function -> Option A

4. Quick Check:

   useMemo needs a function, not a direct call [OK]

Hint: Pass function to useMemo, not function call [OK]

Common Mistakes:

• Calling function instead of passing it
• Ignoring dependency array importance
• Assuming useMemo works without import

5. You have a component that receives a large list as a prop and a function to filter it. You want to optimize rendering and avoid recalculating the filtered list unnecessarily. Which combination is best?

const FilteredList = React.memo(({ list, filterFunc }) => {
  const filtered = useMemo(() => list.filter(filterFunc), [list, filterFunc]);
  return {filtered.length};
});

hard

A. Only use useMemo for filtered list, no React.memo needed

B. Only use React.memo on the component, no useMemo needed

C. Use React.memo on the component and useMemo for filtered list calculation

D. Neither React.memo nor useMemo are useful here

Solution

1. Step 1: Understand React.memo role

   React.memo prevents re-render if props (list, filterFunc) do not change.

2. Step 2: Understand useMemo role

   useMemo caches the filtered list calculation, avoiding expensive recalculation unless dependencies change.

3. Step 3: Combine both for best optimization

   Using both together avoids unnecessary renders and expensive recalculations.

4. Final Answer:

   Use React.memo on the component and useMemo for filtered list calculation -> Option C

5. Quick Check:

   React.memo + useMemo = best performance [OK]

Hint: Combine React.memo and useMemo for props and expensive calculations [OK]

Common Mistakes:

• Using only one optimization and missing the other
• Not including dependencies in useMemo
• Assuming useMemo alone prevents re-render