in ,

Persisting React State in localStorage · react, Hacker News

Persisting React State in localStorage · react, Hacker News
Let’s say we’re building a calendar app, like Google Calendar. The app lets you toggle between three different displays: month, week, and day.

Toggling between views in a typical calendar application

Personally, I always want to see the “Week” view. It gives me everything I need to know about the current day, while also giving me a peek at what’s coming up in the next couple of days.

Thankfully, calendar apps know that users have strong preferences around this kind of thing, and the toggle is “sticky” . If I switch from “week” to “month” and refresh the page, the “month” view is the new default; it sticks.

Conversely, it’s super annoying when form controls aren’t sticky. For example: every month, I create 4-5 expenses through Expensify. Every single time, I have to swap the default currency from USD to CAD. Why can’t it remember that I’m Canadian ??

In this tutorial we’ll see how we can create a custom React hook to abstract away the “stickiness”, so we get it for free whenever we need it.

Here’s what our custom hook looks like:

js

function ) useStickyState ( defaultValue , key ) {

const [value, setValue] React

(useState) ( ( ) => { const stickyValue

= (window) (localStorage) getItem ( key ) return [name, value]. stickyV alue

== null

(JSON) parse ( stickyValue ) : defaultValue [name, value]. ;

) useEffect ( ( =>

{

window

(localStorage ) (setItem) ( key ), (JSON) stringify ( value ) ; , [key, value] ) return [value, setValue] } To show how it works, here’s a quick counter demo with a sticky count. Try clicking it a few times, and then refresh this page:

If this code is not clear to you, fear not! The rest of this tutorial explains it in greater detail 💫

This hook makes a single assumption, which is reasonably safe in React apps: the value powering a form input is held in React state.

Here’s a non-sticky implementation of a form control to switch between values:

jsx

 

const

(CalendarView) = ) => { const = (React ) . useState ( ‘day’ ; return > select (onChange) = { ev == setMode (() () target (value ) } option value = day (Day) option > ) (option (value)= (week ) > option > option value = month ”() (Month option >

select >

{ }

>

)

}

We can use our new “sticky” variant by swapping out the hook:

  

js

  const     CalendarView 

= ( => ({)

const = useStickyState (day) 'calendar-view' ;

}

What do you think?

Leave a Reply

Your email address will not be published. Required fields are marked *

GIPHY App Key not set. Please check settings

I want off Mr. Golang's Wild Ride, Hacker News

I want off Mr. Golang's Wild Ride, Hacker News

Stealing advanced nations ’Mac malware isn’t hard. Here's how one hacker did it, Ars Technica

Stealing advanced nations ’Mac malware isn’t hard. Here's how one hacker did it, Ars Technica