DEV Community

Cover image for React useState lazy initialization in one glance
Thiyagaraj T
Thiyagaraj T

Posted on

2 1

React useState lazy initialization in one glance

How

useState is the simplest React hook out in wild but it has a very interesting feature — lazy initialization
If you provide useState with a function, then it will be executed only on the initial render.


// For every render
const [state, setState] = useState(window.localStorage.getItem("key"));

// Lazy Initialization - Only once
const [state, setState] = useState(() => window.localStorage.getItem("key"));

Enter fullscreen mode Exit fullscreen mode

When to use

Any function that is computationally expensive can be initialized lazily.

Reference
https://reactjs.org/docs/hooks-reference.html#usestate

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more