Immer.js based state provider in React

JourneyContext.tsx

import {
  createContext,
  FC,
  PropsWithChildren,
  useContext,
  useEffect,
} from "react";
import noop from "lodash/noop";
import { Updater, useImmer, History } from "../utils/useImmer";
import { Journey } from "../types/journey";
import { useLoad } from "../services/useLoadJourney";

export const JourneyContext = createContext<
  [Journey | undefined, Updater<Journey | undefined>, Omit<History, "clear">]
>([, noop, {}]);

export const JourneyContextProvider: FC<PropsWithChildren> = (props) => {
  const [journey, setJourney, { undo, redo, clear: clearHistory }] = useImmer<
    Journey | undefined
  >(undefined);
  const { data } = useLoad();

  useEffect(() => {
    if (data) {
      setJourney(() => data);
      clearHistory();
      window.__enc_journey = data; // for preview
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  return (
    <JourneyContext.Provider
      {...props}
      value={[journey, setJourney, { undo, redo }]}
    />
  );
};

export const useJourney = () => useContext(JourneyContext);