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.