Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Persist in localStorage, but do not upgrade React state #46

Closed
rwieruch opened this issue Mar 23, 2022 · 5 comments
Closed

Persist in localStorage, but do not upgrade React state #46

rwieruch opened this issue Mar 23, 2022 · 5 comments
Labels
discussion Discussions on library API decisions

Comments

@rwieruch
Copy link

rwieruch commented Mar 23, 2022

Hi @astoilkov thanks for this great library.

I ran into an edge case and was wondering if that's a feature you may wanna support in the future:

In my case, I want to call setValue for storing the value in local storage, but without updating React's state. In other words, when calling setValue, I do not want a state update and thus no re-render. Scenario: I only want to use useLocalStorageState to write to the local storage and to pick up the value from the storage for the initial rendering, in between I do not care about the value anymore.

This could probably be solved with another property in the options object, e.g. { onlyWrite: true } which would prevent the internal setState call. However, I can also understand if that's something the library is no supposed to offer, because it's after all a solution for syncing the local storage to React's state.

@rwieruch
Copy link
Author

rwieruch commented Mar 23, 2022

My workaround at the moment:

const [resizedLayout] = useLocalStorage('table-widths', {
  defaultValue: [],
});

// we do not want a re-render 
// but only remember the table's columns widths
// to apply when the table gets rendered from scratch
// https://github.com/astoilkov/use-local-storage-state/issues/46
const setResizedLayout = (widths) => {
  if (localStorage) {
    localStorage.setItem('table-widths', JSON.stringify(widths));
  }
};

@astoilkov
Copy link
Owner

I understand your scenario. Give me some time to think about this. I've seen people wanting to get the state only initially and then don't update it but I should think if there is a unifying solution that can fit all scenarios.

@astoilkov
Copy link
Owner

astoilkov commented Mar 27, 2022

Is this solution going to work for you:

const [resizedLayout, setResizedLayout] = useLocalStorage('table-widths', {
  defaultValue: [],
});
// in the code you always use `initialResizedLayout` and you can now call `setResizedLayout()` without causing your behavior to break
const initialResizedLayout = useRef(resizedLayout).current

As my users have written about the same problem I'm thinking of updating the readme. If this solution works for you I would think about explaining this scenario. The solution seems simple and elegant.

@astoilkov astoilkov added the discussion Discussions on library API decisions label Mar 30, 2022
@astoilkov
Copy link
Owner

Hey @rwieruch. Just a reminder. Did you have time to see what I'm proposing?

@astoilkov
Copy link
Owner

I'm closing this because of a lack of activity.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
discussion Discussions on library API decisions
Projects
None yet
Development

No branches or pull requests

2 participants