React Native: Why does FlatList re-render completely on data changes?

Question

thanks for reading my question! I am struggling with this problem since a few days now: My Flatlist component re-renders all items in the list every time I make a change to the underlying data.

Situation:

• I have a FlatList component rendering Items which contain a TouchableOpacity object to toggle Favorite status on this item.
• If this button is pressed, I expect only this specific item to change/re-render in my FlatList instead of all items. It feels like as soon as I update state by calling setListData, it re-renders everything.
• I have encountered this issue in a more complex setup but was able to drill it down to this core problem. Or is this actually the expected behavior?

Code:

import React, { useState } from "react";
import {
  View,
  Text,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from "react-native";

const PlanerScreen = () => {
  const [listData, setListData] = useState([
    { id: "1", name: "Banana", isFav: true },
    { id: "2", name: "Apple", isFav: false },
  ]);

  const Item = ({ item, onPressHandler }) => {
    console.log(item.name, " rendered");
    const color = item.isFav ? "red" : "green";
    return (
      <View
        style={{
          flexDirection: "row",
          width: "100%",
          margin: 10,
        }}
      >
        <Text>{item.name}</Text>
        <TouchableOpacity
          style={{ width: 100, height: 50, backgroundColor: color }}
          onPress={onPressHandler}
        />
      </View>
    );
  };

  const favHandler = (id) => {
    setListData(
      listData.map((item) =>
        item.id === id ? { ...item, isFav: !item.isFav } : item
      )
    );
  };

  console.log("FlatList rendered");
  return (
    <View style={{ flex: 1 }}>
      <StatusBar style={selectedTheme === "light" ? "dark" : "light"} />
      <FlatList
        data={listData}
        renderItem={({ item }) => (
          <Item item={item} onPressHandler={() => favHandler(item.id)} />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>
  );
};

export default PlanerScreen;

Console Output on clicking the Favorite Toggle Button:

FlatList rendered
Banana  rendered
Apple  rendered
FlatList rendered
Banana  rendered
Apple  rendered
FlatList rendered
Banana  rendered
Apple  rendered

Answer 1

You can use React.memo which is an alternative to shouldComponentUpdate for functional components. It tells React when to re-render the component based on prev and next props.

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
})

const keyExtractor = (item) => item.id;

const Item = React.memo(({ item, onPressHandler }) => {
  console.log(item.name, " rendered");
  const color = item.isFav ? "red" : "green";
  return (
    <View
      style={{
        flexDirection: "row",
        width: "100%",
        margin: 10,
      }}
    >
      <Text>{item.name}</Text>
      <TouchableOpacity
        style={{ width: 100, height: 50, backgroundColor: color }}
        onPress={() => onPressHandler(item.id)}
      />
    </View>
  );
}, (prevProps, nextProps) => {
  if (prevProps.item.isFav === nextProps.item.isFav) return true;
  return false;
});

const PlanerScreen = () => {
  const [listData, setListData] = useState([
    { id: "1", name: "Banana", isFav: true },
    { id: "2", name: "Apple", isFav: false },
  ]);

  const favHandler = useCallback((id) => {
    setListData(prevState => {
      return prevState.map((item) =>
          item.id === id ? { ...item, isFav: !item.isFav } : item
        )
      }
    );
  }, []);


  console.log("### FlatList rendered #####");
  return (
    <View style={styles.container}>
      <FlatList
        data={listData}
        renderItem={({ item }) => <Item item={item} onPressHandler={favHandler} />}
        keyExtractor={keyExtractor}
      />
    </View>
  );
};

export default PlanerScreen;