Alexandroppolus

В редуксе такое обычно делают через middleware.

useEffect не очень подходит, потому что завязывает логику сохранения данных в LS на наличие отрендеренного компонента, в котором вызывается useEffect. Можно, конечно, этот компонент разместить в корне приложения, но всё равно так себе..

${MissionWrap}:hover &

Попробуй так:
${MissionWrap}:hover &&

export const useDuration = (userLn: number, userLg: number, pointLn: number, pointLg: number) => {
  const [enabled, setEnabled] = useState(false);

  const {isLoading, data: duration, error, refetch} = useQuery(
    ["get duration", {userLn, userLg, pointLn, pointLg}],
    () => GetDuration.getByCoordinates(userLn, userLg, pointLn, pointLg),
    {
      enabled
    }
  );

  return {isLoading, duration, error, refetch, setEnabled};
};

......
const {..., setEnabled} = useDuration(...);
......
...onClick={() => setEnabled(true)}

Есть разные варианты.
Классический реактовский сюжет - когда для каждого объекта рендерится компонент TreeItem, который отрабатывает клик и по клику сам загружает массив своих дочерних объектов. Этот массив хранится в локальном стейте. Но если дерево может не только разворачиваться, но и сворачиваться, то рендерить дочерние элементы не надо, и они размонтируются, с пропажей стейта - потом придется грузить заново. Если это беспокоит, то надо подумать о кэшировании. Или, например, использовать ReactQuery - он сам кэширует.

Если надо хранить весь набор данных вместе, то воспользуйся стейт-манагером. МобХ позволяет держать мутабельное дерево, в редаксе лучше нормализованный вид (чтобы не было лишних перерендеров).

key={uuidv4()}

Из-за этого все LocationMarker перемонтируются вместо обновления. Попробуй заменить на key={elem}

root.render(
  <App />
);

Консюмер почти не используется, вместо него useContext.

А примеров - миллиарды. Тема, локаль. В библиотеках: хранение стора в реакт-редукс, хранение навигации в реакт-роутер, тема в стайлед-компонентс. Автор мобикса тоже советует сторы хранить в контексте. Это прям вот навскидку вспомнилось.

Вполне рабочий вариант. Я бы только обернул это дело в стрелочную функцию, чтобы на каждом рендере не лазить в локалсторадж

const [settings, setSettings] = useState<ISettings>(() => 
    localStorage.getItem("settings") == null ? defaultSettings : (JSON.parse(localStorage.getItem("settings")!) as ISettings)
  );