Лучшая читабельность: имя/комментарий функции деструктора, возвращаемой обратным вызовом useEffect.

Недавно я столкнулся со случаем, когда какой-то обработчик событий на странице неправильно отписался из-за кучи ошибок. В ответ на мою предыдущую статью https://medium.com/@liunate/1-second-refactoring-readability-and-maintainability-by-naming-your-function-e-g-react-useeffect-77c7a92d37aa я обнаружил, что это также полезно назвать вашу функцию обратного вызова деструктора/отписки, возвращаемую вашим обратным вызовом useEffect.

Например:

useEffect(function listenToKeyStroke() {
  const logger = console.log('key down');
  document.addEventListener('keydown', logger);

  // named destructor, which is printed out at console callstack
  return function stopListeningToKeyStroke() {
    throw 'bad code here';
    document.removeEventListener('keydown', logger);
  };
}, [])

В дополнение к удобочитаемости исходного кода (вы знаете, для чего нужен этот деструктор), при размонтировании компонента выводит консоль, сообщающую вам, откуда возникла ошибка, без необходимости погружаться в источник: