React.memo and useMemo in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the component with React.memo for performance optimization.

React Native

const MyComponent = () => {
  return <Text>Hello World</Text>;
};

export default [1](MyComponent);

Drag options to blanks, or click blank then click option'

AReact.useMemo

BReact.memo

Cmemoize

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using useMemo instead of React.memo for components.

Trying to call memoize which is not a React API.

React.memo is used to wrap a component to memoize it and avoid unnecessary re-renders.

2fill in blank

medium

Complete the code to memoize a computed value using useMemo hook.

React Native

const total = useMemo(() => {
  return items.reduce((sum, item) => sum + item.price, 0);
}, [[1]]);

Drag options to blanks, or click blank then click option'

Atotal

Bprice

Citems

Dsum

Attempts:

3 left

💡 Hint

Common Mistakes

Putting the computed value 'total' in the dependency array.

Using a variable not related to the calculation.

The dependency array should include the variable that, when changed, triggers recomputation. Here, it's 'items'.

3fill in blank

hard

Fix the error in the code by choosing the correct way to memoize a callback function.

React Native

const handleClick = [1](() => {
  console.log('Clicked');
}, []);

Drag options to blanks, or click blank then click option'

AuseCallback

BReact.memo

CuseMemo

Dmemoize

Attempts:

3 left

💡 Hint

Common Mistakes

Using useMemo to memoize functions.

Trying to use React.memo for functions.

useCallback is the correct hook to memoize functions, not useMemo.

4fill in blank

hard

Fill both blanks to correctly memoize a list of items and avoid re-rendering the child component.

React Native

const memoizedItems = [1](() => items, [[2]]);

Drag options to blanks, or click blank then click option'

AuseMemo

Bitems

Cdata

DReact.memo

Attempts:

3 left

💡 Hint

Common Mistakes

Using React.memo instead of useMemo for values.

Putting unrelated variables in the dependency array.

useMemo memoizes the items array, and the dependency array should watch 'items'.

5fill in blank

hard

Fill both blanks to create a memoized component that only re-renders when props change.

React Native

const MemoizedComponent = [1](function MyComponent({ [2] }) {
  return <Text>{name}</Text>;
});

export default MemoizedComponent;

Drag options to blanks, or click blank then click option'

AReact.memo

Bname

Cprops

DuseMemo

Attempts:

3 left

💡 Hint

Common Mistakes

Using useMemo instead of React.memo for components.

Not destructuring props correctly.

React.memo wraps the component, 'name' is destructured from props, and used inside the component.

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