Performance and Optimization

# CHAPTER 27

Performance and Optimization #

1. Introduction #

2. Learning Objectives #

• Identify the cascading re-render problem in React.

• Use React.memo to cache pure UI components.

• Use the useMemo hook to cache heavy mathematical calculations.

• Use the useCallback hook to stabilize function references across renders.

• Apply aggressive optimization strategies to FlatList.

3. The Re-Render Problem #

// Every time you click "Increase", the App redraws.
// Because App redraws, <HeavyStaticImage /> is forcibly redrawn too, even though it hasn't changed!
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <View>
      <Button title="Increase" onPress={() => setCount(count + 1)} />
      <Text>{count}</Text>
      <HeavyStaticImage /> 
    </View>
  );
}

4. React.memo (Caching the UI) #

import React, { memo } from 'react';
import { View, Text } from 'react-native';

// Wrap the component function in memo()!
const HeavyStaticImage = memo((props) => {
  console.log("I am drawing..."); // This will now only print once!
  return (
    <View style={{ height: 500, width: 500, backgroundColor: &#039;grey&#039; }}>
      <Text>Massive Image Here</Text>
    </View>
  );
});

export default HeavyStaticImage;

5. useMemo (Caching Calculations) #

import React, { useState, useMemo } from 'react';

export default function ProductList({ rawData }) {
  const [search, setSearch] = useState('');

  // 1. The heavy function
  const sortMassiveArray = (data) => {
    console.log("Sorting 10,000 items...");
    return data.sort(); // Takes 2 seconds!
  };

  // 2. The Cache (useMemo)
  // It will ONLY re-run the sort function if 'rawData' actually changes!
  // If the user is just typing in the 'search' box, it skips the math and returns the cached array!
  const sortedData = useMemo(() => sortMassiveArray(rawData), [rawData]);

  return <View>...</View>;
}

6. useCallback (Caching Functions) #

We use useCallback to cache the *definition* of the function itself!

import React, { useState, useCallback } from 'react';
import ChildComponent from './ChildComponent'; // Assume this is wrapped in React.memo

export default function App() {
  const [count, setCount] = useState(0);

  // Without useCallback, this function is destroyed and recreated on every render.
  // With useCallback, the memory address stays exactly the same!
  const handlePress = useCallback(() => {
    console.log("Button pressed!");
  }, []); // Empty array means never recreate this function

  return (
    <View>
      <Text>{count}</Text>
      <Button title="Add" onPress={() => setCount(count + 1)} />
      
      {/* Because handlePress has a stable memory address, ChildComponent's React.memo works! */}
      <ChildComponent onCustomPress={handlePress} />
    </View>
  );
}

7. FlatList Optimization #

1. 1. Always use keyExtractor: Prevents the list from rebuilding identical items.

1. 2. Optimize renderItem: The function passed to renderItem MUST be wrapped in a useCallback so it isn't recreated 100 times.

1. 3. Memoize List Items: The individual <ProductCard> you return inside renderItem MUST be wrapped in React.memo.

const renderItem = useCallback(({ item }) => {
  return <MemoizedProductCard data={item} />;
}, []); // Cached renderer!

8. Visual Learning: The Memoization Triad #

Is the App lagging?

1. Is a UI Component redrawing unnecessarily?
   -> Use `React.memo(Component)`
   
2. Is a massive Math Calculation running unnecessarily?
   -> Use `useMemo(() => math(), [dependencies])`
   
3. Is a Function Prop causing a Memoized Child to redraw?
   -> Use `useCallback(() => function(), [dependencies])`

9. Common Mistakes #

• Memoizing Everything: A massive beginner mistake is wrapping literally every single variable and component in useMemo and memo. Memoization requires RAM to store the cache. If you cache thousands of tiny, fast components, the RAM usage will skyrocket, and checking the cache will actually take longer than just redrawing the UI. ONLY memoize highly complex UI trees or heavy array operations.

10. Best Practices #

• Console.log Auditing: The easiest way to find performance leaks is to put a console.log("Drawing Component X") at the top of your component. If you click a button and the terminal spits out "Drawing Component X" 50 times, you have a massive re-render leak. Fix it with the triad above!

11. Practice Exercises #

1. 1. What higher-order React function is used to wrap an entire UI component so that it only re-renders if its explicit props change?

1. 2. If you are passing an onPress arrow function down into a heavily optimized <FlatList> child component, what hook must you wrap the arrow function in to preserve its memory address?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the mechanical difference between useMemo and useCallback. What exactly is being cached in each scenario?

• Q: Detail the cascading re-render behavior in React. How does React.memo intercept this behavior, and what is the computational cost of using React.memo everywhere?

• Q: A developer has implemented a <FlatList> rendering 5,000 items. Scrolling is incredibly jittery. Detail three specific optimizations you would implement regarding renderItem, list keys, and component memoization to achieve 60 FPS.

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #