React.memo and useMemo in React Native - Mini App: Build & Ship

Build: Memo Demo Screen

This screen shows a list of numbers and a button to add random numbers. It uses React.memo to avoid re-rendering list items unnecessarily and useMemo to memoize the sum calculation.

Target UI

-------------------------
| Memo Demo Screen       |
|-----------------------|
| Numbers:              |
| 1                     |
| 2                     |
| 3                     |
|                       |
| Sum: 6                |
|                       |
| [Add Random Number]    |
-------------------------

Display a list of numbers using a child component wrapped with React.memo

Add a button that adds a random number to the list

Calculate and display the sum of numbers using useMemo to avoid recalculating on unrelated renders

Ensure the list items do not re-render when the sum changes

Starter Code

React Native

import React, { useState, useMemo } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

const NumberItem = React.memo(({ value }) => {
  console.log('Rendering item:', value);
  return <Text style={styles.item}>{value}</Text>;
});

export default function MemoDemoScreen() {
  const [numbers, setNumbers] = useState([1, 2, 3]);

  // TODO: Calculate sum using useMemo

  // TODO: Add function to add random number

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Numbers:</Text>
      <FlatList
        data={numbers}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <NumberItem value={item} />}
      />
      <Text style={styles.sum}>Sum: {/* TODO: show sum here */}</Text>
      <Button title="Add Random Number" onPress={() => { /* TODO: add number */ }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 20, marginBottom: 10 },
  item: { fontSize: 18, paddingVertical: 4 },
  sum: { fontSize: 18, marginVertical: 20 }
});

Task 1

Task 2

Task 3

Task 4

Solution

React Native

import React, { useState, useMemo } from 'react';
import { View, Text, Button, FlatList, StyleSheet } from 'react-native';

const NumberItem = React.memo(({ value }) => {
  console.log('Rendering item:', value);
  return <Text style={styles.item}>{value}</Text>;
});

export default function MemoDemoScreen() {
  const [numbers, setNumbers] = useState([1, 2, 3]);

  const sum = useMemo(() => {
    console.log('Calculating sum');
    return numbers.reduce((acc, val) => acc + val, 0);
  }, [numbers]);

  const addRandomNumber = () => {
    const randomNum = Math.floor(Math.random() * 100) + 1;
    setNumbers(prev => [...prev, randomNum]);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Numbers:</Text>
      <FlatList
        data={numbers}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <NumberItem value={item} />}
      />
      <Text style={styles.sum}>Sum: {sum}</Text>
      <Button title="Add Random Number" onPress={addRandomNumber} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20 },
  title: { fontSize: 20, marginBottom: 10 },
  item: { fontSize: 18, paddingVertical: 4 },
  sum: { fontSize: 18, marginVertical: 20 }
});

We wrapped the NumberItem component with React.memo so it only re-renders when its value prop changes. This avoids unnecessary re-renders when the sum changes.

The sum is calculated using useMemo which caches the result and only recalculates when the numbers array changes. This improves performance by skipping sum calculation on unrelated renders.

The addRandomNumber function adds a new random number to the list, triggering a re-render and recalculation of the sum.

This example shows how React.memo and useMemo help optimize React Native apps by reducing unnecessary work.

Final Result

Completed Screen

-------------------------
| Memo Demo Screen       |
|-----------------------|
| Numbers:              |
| 1                     |
| 2                     |
| 3                     |
| 57                    |
|                       |
| Sum: 63               |
|                       |
| [Add Random Number]    |
-------------------------

Tapping 'Add Random Number' adds a new random number to the list below the existing numbers.

The sum updates to show the new total of all numbers.

Only the new number item re-renders; existing items do not re-render.

Sum recalculation happens only when numbers change, not on other state changes.

Stretch Goal

Add a toggle button to switch between light and dark mode for the screen.

💡 Hint

Use React state to track mode and apply conditional styles for background and text colors.

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