Accordion with Persisted State

Open a section, reload the page. The inline script restores your selection before paint, and the lazy useState initializer reads the same value so React agrees with the DOM.

About

This demo shows how to persist which accordion section is open across page reloads using localStorage and an inline script.

How it works

An inline script reads localStorage before React hydrates and sets the open attribute on the correct details element. The useState lazy initializer reads the same value so React's initial state matches the DOM.

Why not useEffect?

useEffect runs after paint. The user would see the default section open first, then a flash as it switches to their saved section.