Книга «React. Быстрый старт, 2-е изд.»

Эх, книга только вышла, а уже частично устарела. Сами разработчики React не рекомендуют использовать Create React App, также CRA уже нет для старта в новой документации

Использование шаблонов проектирования группы GoF в React

По поводу паттерна Observer правильнее было бы иметь вот такой код:

import { useEffect, useState } from "react";

export const InternetAvailabilityObserver = () => {
  const [isOnline, setOnline] = useState<any>(navigator.onLine);
  
  const onlineSetter = () => setOnline(true);
  const offlineSetter = () => setOnline(false);

  useEffect(() => {
    window.addEventListener("online", onlineSetter);
    window.addEventListener("offline", () => offlineSetter);
    return () => {
      // when component gets unmounted, remove the event listeners to prevent memory leaks

      window.removeEventListener("online", onlineSetter);
      window.removeEventListener("offline", offlineSetter);
    };
  }, []);

  return (
    <><h1>Internet Availability Observer</h1><p>
        {isOnline ? (
          <><span>
              You are <b>online</b></span></>
        ) : (
          <><span>
              You are <b>offline</b></span></>
        )}
      </p>
    </>
  );
};

Функции в JS являются объектами и никогда не имеют ссылку на ту же область в памяти где существуют. Поэтому в приведенном в статье примере memory leak будет случаться каждый раз при размонтировке компонента