Next 13: Preload data/user settings from localStorage

Question

I have a tabular React component in Next.js which uses localStorage to save and restore user's preference of which columns to show and which ones to hide. Naturally, I want the component to load the user's preference before rendering any part of the table.

Using localStorage directly in state variable initialization causes ReferenceError at the server about localStorage being undefined because of SSR.

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
        JSON.parse(localStorage.getItem("columnVisibility") || "{}"))

Using useEffect to load the preferences takes time and renders the table header before loading them fully, hence showing the default configuration instead of the user-defined one for a moment.

const [columnVisibility, setColumnVisibility] = useState<VisibilityState>()
useEffect(() => {
     setColumnVisibility(JSON.parse(localStorage.getItem("columnVisibility") || "{}"))
}, [])

Supakorn Netsuwan · Accepted Answer · 2023-08-01 14:49:29Z

0

const [string, setString] = useState<string>("default")
// define default value

useEffect(()=>{
   localStorage.getItem("stored-string") || "default"
}, [])

Is this solution works ?

edited Aug 1, 2023 at 14:49

answered Aug 1, 2023 at 13:37

Supakorn Netsuwan

6537 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Next 13: Preload data/user settings from localStorage

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related