useLocalStorage value not sync when calling remove method

[lgaspari]

Hey everyone! I'm currently using the useLocalStorage hook provided by Mantine to manage my application's access token and I might have found an issue.

const [accessToken, setAccessToken, clearAccessToken] = useLocalStorage({
  deserialize: (value) => value,
  /**
   * @note incompatible with SSR
   */
  getInitialValueInEffect: false,
  key: 'access-token',
  serialize: (value) => value,
});

Whenever I make changes to the value using setAccessToken it works as expected, the accessToken gets changed.

const login = async (data) => {
  const token = await fetch(data);
  setAccessToken(token);
};

...

// prints new value (e.g. 'abc123')
console.log('accessToken', accessToken);

However, upon using clearAccessToken, it looks like the variable gets deleted the accessToken value remains.

const logout = async () => {
  clearAccessToken();
};

...

// still prints old value (e.g. 'abc123')
console.log('accessToken', accessToken);

I was unsure if this was an issue, so I decided to go with the discussion just in case. Here's the codesandbox to reproduce the issue I'm having.

As a workaround, I replaced clearAccessToken() with setAccessToken(undefined) to get the same result, but seems hacky considering I want to remove both key and value from storage.

Anyone else went through this issue too?

Thanks

[rtivital]

Thanks for reporting, the issue will be fixed in one of the next patches

[lgaspari]

Awesome, thanks @rtivital!

[icgurney]

Fixed by #3298