I use redux-sessionstorage to store a subset of my app's state to session storage. Part of that state indicates whether certain panels in the UI are expanded or collapsed (visible or hidden). This test app reproduces that functionality with a simple Notice panel hidden (or shown) at the click of a button.
git clone git@github.com:shawninder/sessionstorage-bug
cd sessionstorage-bug
npm install
npm run dev
- Visit
http://localhost:3000
with your favorite browser - By clicking the
toggle
button, setshowNotice
totrue
. - Reload the page
- Expect the server to send down HTML with
showNotice
set tofalse
(CHECK) - Expect sessionstorage to update the state and set
showNotice
totrue
(CHECK) - Expect
render
to be called with the new state (CHECK) - Expect the new text content to say
showNotice: true
(CHECK), proving render was called with the new (saved in sessionstorage) value - Expect the notice to transition into a visible state (
opacity: 1, translateX(0)
) (OOPS) - Observe that instead, the notice remains invisible.
It seems that in the particular case of a render triggered by hydration from session storage, react knows to re-render the nodes, but not their attributes (in this case style
, but className
has the same problem). Indeed, the problem disappears if I hide the notice using { props.showingNotice ? <div... /> : null}
. Unfortunately, this method doesn't really support transitioning from visible to hidden, which is why I prefer using opacity and transform.
How can I make sure that updates made by the redux-sessionstorage package correctly update the attributes as well as the nodes themselves?