Summary - Performance

Combine React.memo, useCallback and useMemo to write an optimized list.

Summary - Performance

In this group you learned five tools for performance. React.memo skips a component unless props change. useCallback keeps a function reference stable. useMemo caches the result of an expensive computation. FlatList optimization with getItemLayout and keyExtractor speeds up scrolling.

InteractionManager defers heavy work until after interactions. Using these five together keeps a real app smooth. Adding all of them everywhere is not right; add them with measure and need. Use the Profiler to see where the bottleneck is, then pick the matching tool.

Exercise Memoized card and useCallback

A Card component is already defined; it takes a title prop. Create MemoCard with React.memo. Inside the App component hold a count state; define handlePress with useCallback (deps []). Pass title={count.toString()} to MemoCard.

Show example solution

import React, { useState, useCallback } from "react";
import { Text, View } from "react-native";

function Card({ title }) {
  return <Text>{title}</Text>;
}

const MemoCard = React.memo(Card);

export default function App() {
  const [count, setCount] = useState(0);
  const handlePress = useCallback(() => {
    setCount((c) => c + 1);
  }, []);
  return <MemoCard title={count.toString()} />;
}

Test yourself

To keep a function reference stable?
```
const fn = ???(() => {}, []);
```
- useCallback
- React.memo
- useMemo
- InteractionManager
Show answer

useCallback — useCallback keeps a function reference stable.
Match each tool to its purpose

React.memo

Wraps a component
useCallback

Stores a function
useMemo

Caches a value
InteractionManager

Defers work

useCallback import

import { ____, useState } from 'react';

Show answer

import { useCallback, useState } from 'react';

Next lesson: Jest

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies