Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

state is not persisted to LS during initial render with defaultValue

See original GitHub issue

const [locale, setLocale] = useLocalStorageState<'en-US' | 'es'>(
  'locale', 'en-US',
)

The above will not actually persist the default value to the local storage key until setLocale is called. I would expect the library to initialize the LS key with the default value if it doesn’t already exist.

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

astoilkovcommented, Apr 22, 2021

That makes sense. I will change the behavior. Thanks.

1reaction

probablyupcommented, Apr 21, 2021

Do you have a specific use case where you need for the value to be inserted into localStorage before calling setLocale()?

Well I’d expect it to work like React.setState where once you set the value, it’s persisted. Very confusing behavior for you to supply a default value and not have it automatically persist to LS. Like imagine you derive a user’s locale based on what URL they land on etc and then want to persist that, feeding it in as the default value. Without this behavior the only way to get it to persist is to switch it to something else and then back to the value you actually want.

Top Results From Across the Web

React input defaultValue doesn't update with state

Another way of fixing this is by changing the key of the input. <input ref="text" key={this.state.awayMessage ? 'notLoadedYet' : 'loaded'} onChange={this.

@State's initial value doesn't cha… | Apple Developer Forums

I'm having trouble understanding how to reset a @State property to its initial value. In my app, I have one view that sets...

My useState always renders the default value when ... - Reddit

Hey. I am creating a page where when the value of the useState variable is set to true, the component loads, but when...

Form not populating with defaultState after re-render #2282

The values are stored in a state atom called userInputState, which is passed down to a child form (using react-hook-form) as "initialState." The ......

Dockerfile reference - Docker Documentation

Dockerfiles use a simple DSL which allows you to automate the steps you would normally manually take to create an image.