The `useLocationState` hook gives a `React.useState`-like interface to updating the HTML5 History API location state.

1.example.js

function Foo() {
  const [count, setCount] = useLocationState('Foo', 0);
  
  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>Clicks: {count}</button>
      <button onClick={() => setCount(0)}>Reset</button>
    </div>
  );
} 

2.history.js

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

const history = createBrowserHistory();

export function useHistory() {
  return history;
}

export function useLocationState<T>(
  key: ?string,
  initial: T,
): [T, (update: T | ((x: T) => T)) => void] {
  const stateKey = key || '_default';

  const [loc, setLoc] = React.useState({
    pathname: window.location.pathname,
    search: window.location.search,
    hash: window.location.hash,
    state: window.history.state && window.history.state.state,
  });

  const get = () => {
    if (loc.state && loc.state[stateKey] !== undefined) {
      return loc.state[stateKey];
    }

    return initial;
  };

  React.useEffect(
    () =>
      history.listen((location) => {
        setLoc(location);
      }),
    [],
  );

  const set = React.useCallback(
    (update, callback) => {
      const state = typeof update === 'function' ? update(get()) : update;
      history.replace({
        ...loc,
        state: {
          ...loc.state,
          [stateKey]: state,
        },
      });
    },
    [loc],
  );

  return [get(), set];
}

export default history;