History provider with useState / useRef

history-with-outer.jsx

import React from 'react';
import { createBrowserHistory } from 'history';

export const historyContext = React.createContext(null);
const HistoryContextProvider = historyContext.Provider;

// This is initialized at the time the file/module is imported, and not on component mount.
const history = createBrowserHistory();

export function History(props) {
  return <HistoryContextProvider value={history} {...props} />;
}

history-with-state.jsx

import React from 'react';
import { createBrowserHistory } from 'history';

export const historyContext = React.createContext(null);
const HistoryContextProvider = historyContext.Provider;

export function History(props) {
  // Initialize the instance in useState. Initialized on mount. Available from first render.
  const [history] = React.useState(() => createBrowserHistory());

  return <HistoryContextProvider value={history} {...props} />;
}