Fix stale localState

[mayteio]

I noticed that when keys dynamically change and re-render, localState is stale. The following example demonstrates this currently:

const App = () => {
  // key starts out as one value
  const [key, set] = React.useState('key1');

  // pass in key to get localStorage
  let [name, setName] = useLocalStorage(key, 'default value');
  React.useEffect(() => {
    // immediately set localStorage value to something
    setName('key1 name');

    // update the key and re-render
    setTimeout(() => set('key2'), 1000);

    // resulted in the {name} below always printing "key1 name"
  }, []);

  return (
    <div>
      <h1>{name}</h1>
    </div>
  );
};

This pull request fixes this by basically adding the key as a dependency to each useEffect/useCallback, and adding an effect that rehydrates localState when the key changes with whatever the actual value is.

I also wrote a test in test/index.test.tsx to ensure it works. Current tests don't catch a stale onLocalStorageChange useCallback at the moment either - worth noting.

Finally - I apologies for the handful of formatting changes - there is no .prettierrc file to enforce code style.

Let me know if you have any questions! Cheers for the great plugin otherwise.

[mayteio]

@iamsolankiamit this didn't seem to make it into master.

[mayteio]

Hey @iamsolankiamit I don't think this particular useEffect made it into the release for some reason? It's missing from compiled source and master.