We want certain state variables to be available across components and to not lose their value when the user navigates back and forth between pages in the application.
Currently, we implement this behavior using Redux. Using Redux is pretty complicated.
We now have an alternative to Redux called "Sticky State", based upon Simpler State. useStickyState() is a React Hook and is used in exactly the same manner as useState().
For example, to create a non-sticky state variable, you use the useState() hook:
To create a "sticky" state variable, you just use useStickyState():
Unlike useState(), useStickyState() requires a string ID to be provided in addition to the initial value. This is cool, because it allows you to access the same state variable in any component in the application just by using the same invocation of useStickyState().
An interactive example of the use of useStickyState() is available in the stickystate sandbox page:
Source code for this sandbox example is available in the sandbox/ directory.