Unable to prevent Flatlist from re-rendering (already using useCallback and memo)

Question

I'm building a to do list app as part of a coding course, using Firebase Realtime Database and React Native with Expo.

I have no problems rendering the to do list, and in this case clicking a checkbox to indicate whether the task is prioritized or not.

However, each time I click on the checkbox to change the priority of a single task in the to do list, the entire Flatlist re-renders.

Each task object is as follows:

{id: ***, text: ***, priority: ***}

Task Component: (It consists of the text of the to do (task.text), and also a checkbox to indicate whether the task is prioritized or not). I've wrapped this component in React.memo, and the only props passed down from Todolist to Task are the individual task, but it still re-renders every time. (I left out most of the standard imports in the code snippet below)

import { CheckBox } from '@rneui/themed';

const Task = ({ 
    item, 
    }) => {

    console.log(item)
    
    const { user } = useContext(AuthContext);

    const onPressPriority = async () => {
            await update(ref(database, `users/${user}/tasks/${item.id}`), {
                priority: !item.priority,
            });
        };


    return (
        <View
            style={{ flexDirection: 'row', alignItems: 'center', width: '95%' }}
        >
            <View
                style={{ width: '90%' }}
            >
                <Text>{item.text}</Text>
            </View>
            <View
                style={{ width: '10%' }}
            >
                <CheckBox
                    checked={item.priority}
                    checkedColor="#00a152"
                    iconType="material-community"
                    checkedIcon="checkbox-marked"
                    uncheckedIcon={'checkbox-blank-outline'}
                    onPress={onPressPriority}
                />
            </View>
        </View>
        )}


        export default memo(Task, (prevProps, nextProps) => { 
            if (prevProps.item !== nextProps.item) {
                return true
            }
            return false
        })

To Do List parent component: Contains the Flatlist which renders a list of the Task components. It also contains a useEffect to update the tasks state based on changes to the Firebase database, and the function (memoizedOnPressPriority) to update the task.priority value when the Checkbox in the task component is clicked. Since memoizedOnPressPriority is passed a prop to , I've tried to place it in a useCallback, but is still re-rendering all items when the checkbox is clicked. (I left out most of the standard imports in the code snippet below)

export default function Home2() {

  const { user } = useContext(AuthContext);
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    if (user) {
      return onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
        const todos = snapshot.val();
        const tasksCopy = [];
        for (let id in todos) {
          tasksCopy.push({ ...todos[id], id: id });
        }

        setTasks(tasksCopy);
      });
    } else {
      setTasks([]);
    }
  }, [user]);


  const renderItem = ({ item }) => (
    <TaskTwo
      item={item}
    />
  );


  return (
    <View style={styles.container}>
          <FlatList
            data={tasks}
            initialNumToRender={5}
            windowSize={4}
            renderItem={renderItem}
            keyExtractor={item => item.id}
          />
    </View>
  );
}

Could anyone let me know what I'm doing wrong, and how I can prevent the entire Flatlist from re-rendering each time I invoke the memoizedOnPressPriority function passed down to the Task component from the TodoList parent component? Any help is much appreciated!

The flamegraph for the render is below:

Update: I moved the prioritize function (memoizedOnPressPriority) into the Task component and removed the useCallback - so it's not being passed as a prop anymore. The re-render still happens whenever I press it.

Update 2: I added a key extractor , and also a custom equality function into the memoized task component. Still keeps rendering!

Answer 1

I'm not familiar with Firebase Realtime Database, but if I understand the logic correctly, the whole tasks array is updated when one item changes, and this is what is triggering the list update.

Fixing the memo function

Wrapping the Task component in memo does not work because it performs a shallow comparison of the objects. The objects change each time the data is updated because a new tasks array with new objects is created, so the references of the objects are different. See this post for more details.

To use memo, we have to pass a custom equality check function, that returns true if the component is the same with new props, like so:

export default memo(Task, (prevProps, nextProps) => { 
  if (prevProps.item.id === nextProps.item.id && prevProps.item.priority === nextProps.item.priority ) {
    return true;
  }
  return false;
})

Note that is the text is modifiable, you'll want to check that too.

Alternative solution : read data from the Task component

This solution is recommended and takes full advantage of Firebase Realtime Database. To update only the component that is updated, you need to pass an array of ids to your flatlist, and delegate the data reading to the child component.

It's a pattern I use with redux very often when I want to update a component without updating the whole flatlist.

I checked the documentation of Firebase Realtime Database, and they indeed encourage you to read data at the lowest level. If you have a large list with many properties, it's not performant to receive the whole list when only one item is updated. Under the hood, the front-end library manages the cache system automatically.

//TodoList parent Component
...
const [tasksIds, setTasksIds] = useState([]);

useEffect(() => {
    if (user) {
      return onValue(ref(database, `users/${user}/tasks`), (snapshot) => {
        const todos = snapshot.val();
        // Build an array of ids
        const tasksIdsFromDb = todos.map((todo) => todo.id);
        setTasksIds(tasksCopy);
      });
    } else {
      setTasksIds([]);
    }
  }, [user]);

...
// keep the rest of the code and pass tasksIds instead of tasks to the flatlist

const Task = ({ taskId, memoizedOnPressPriority }) => {
  const [task, setTask] = useState(null)

  const { user } = useContext(AuthContext);

  useEffect(() => {
    if (user) {
      // retrieve data by id so only the updated component will rerender
      // I guess this will be something like this
      return onValue(ref(database, `users/${user}/tasks/${taskId}`), (snapshot) => {
        const todo = snapshot.val();
        setTask(todo);
      });
    } else {
      setTask(null);
    }
  }, [user]);

if (task === null) {
  return null
}

// return the component like before