Присоединение / отключение слушателей в React

У меня есть компонент, который, в зависимости от своей опоры (listId), слушает другой документ в базе данных Firestore.

Однако, когда я обновляю компонент для использования нового listId, он по-прежнему использует предыдущий прослушиватель.

Как правильно отсоединить старый слушатель и запустить новый, когда компонент получает новые реквизиты?

Некоторый код:

import React from 'react';
import PropTypes from 'prop-types';
import { db } from '../api/firebase';

class TodoList extends React.Component {
  state = {
    todos: [],
  };

  componentWillMount() {
    const { listId } = this.props;
    db.collection(`lists/${listId}/todos`).onSnapshot((doc) => {
       const todos = [];

       doc.forEach((t) => {
         todos.push(t.data());
       });

       this.setState({ todos });
     });
   };

  render() {
    const { todos } = this.state;
    return (
        {todos.map(t => <li>{t.title}</li>)}
    );
  }
}

TodoList.propTypes = {
  listId: PropTypes.object.isRequired,
};

export default TodoList;

Я пробовал использовать componentWillUnmount(), но компонент никогда не отключается, он просто получает новые реквизиты от родителя.

Я подозреваю, что мне нужно что-то вроде getDerivedStateFromProps(), но я не уверен, как правильно обрабатывать присоединение / отсоединение слушателя.