Every interactive app keeps track of things that can change over time: user input, network responses, UI toggles, media loading progress, and more. In community threads, you often see devs wrestle with questions like where to store data, how to update it predictably, and how to keep the UI in sync.<\/p>\n\n\n\n
What is state in JavaScript? How is it different from props or plain variables, where should it live in a web app, and what are reliable patterns to update state without bugs? I use both vanilla JS and frameworks like React, so examples for both would help.<\/em><\/p>\n\n\n\n In JavaScript, state is the data that represents the current reality of your application at a given time. When state changes, your app behavior or UI should update to reflect it. State can be ephemeral in memory, persisted in storage, or fetched from servers.<\/p>\n\n\n\n Server state can arrive out of order. Cancel in-flight requests when a new one starts to prevent stale updates.<\/p>\n\n\n Suppose your app tracks user preference and network info in state, then builds the right transformation URL on the fly.<\/p>\n\n\nAnswer:<\/h2>\n\n\n\n
Common Types of State<\/h3>\n\n\n\n
\n
localStorage<\/code> or IndexedDB<\/code> that survives page reloads.<\/li>\n<\/ul>\n\n\n\nGuiding Principles<\/h3>\n\n\n\n
\n
Vanilla JS Example: Local State With a Simple Store<\/h3>\n\n\n
\/\/ Minimal store pattern using a closure<\/span>\nfunction<\/span> createStore<\/span>(initialState<\/span>) <\/span>{\n\u00a0 let<\/span> state = initialState;\n\u00a0 const<\/span> subs = new<\/span> Set<\/span>();\n\n\u00a0 function<\/span> getState<\/span>(<\/span>) <\/span>{ return<\/span> state; }\n\u00a0 function<\/span> subscribe<\/span>(fn<\/span>) <\/span>{ subs.add(fn); return<\/span> ()<\/span> =><\/span> subs.delete(fn); }\n\u00a0 function<\/span> setState<\/span>(updater<\/span>) <\/span>{\n\u00a0 \u00a0 const<\/span> next = typeof<\/span> updater === 'function'<\/span> ? updater(state) : updater;\n\u00a0 \u00a0 if<\/span> (next !== state) {\n\u00a0 \u00a0 \u00a0 state = next;\n\u00a0 \u00a0 \u00a0 subs.forEach(fn<\/span> =><\/span> fn(state));\n\u00a0 \u00a0 }\n\u00a0 }\n\n\u00a0 return<\/span> { getState, setState, subscribe };\n}\n\n\/\/ Counter example<\/span>\nconst<\/span> store = createStore({ count<\/span>: 0<\/span> });\n\nconst<\/span> $value = document<\/span>.getElementById('value'<\/span>);\nconst<\/span> $inc = document<\/span>.getElementById('inc'<\/span>);\nconst<\/span> $dec = document<\/span>.getElementById('dec'<\/span>);\n\nstore.subscribe(s<\/span> =><\/span> { $value.textContent = s.count; });\n$inc.addEventListener('click'<\/span>, () => store.setState(s<\/span> =><\/span> ({ ...s, count<\/span>: s.count + 1<\/span> })));\n$dec.addEventListener('click'<\/span>, () => store.setState(s<\/span> =><\/span> ({ ...s, count<\/span>: s.count - 1<\/span> })));\n\n\/\/ Initial render<\/span>\n$value.textContent = store.getState().count;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nReact Example: Component State and Immutable Updates<\/h3>\n\n\n
import<\/span> { useState, useReducer } from<\/span> 'react'<\/span>;\n\n\/\/ Simple array updates<\/span>\nfunction<\/span> Cart<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> [items, setItems] = useState([]);\n\u00a0 function<\/span> addItem<\/span>(item<\/span>) <\/span>{\n\u00a0 \u00a0 setItems(prev<\/span> =><\/span> [...prev, item]); \/\/ do not mutate prev directly<\/span>\n\u00a0 }\n\u00a0 return<\/span> <button<\/span> onClick<\/span>={()<\/span> =><\/span> addItem({ id: Date.now() })}>Add item<\/button<\/span>><\/span><\/span>;\n}\n\n\/\/ Complex transitions with useReducer<\/span>\nfunction<\/span> reducer<\/span>(state, action<\/span>) <\/span>{\n\u00a0 switch<\/span> (action.type) {\n\u00a0 \u00a0 case<\/span> 'add'<\/span>: return<\/span> { ...state, count<\/span>: state.count + 1<\/span> };\n\u00a0 \u00a0 case<\/span> 'sub'<\/span>: return<\/span> { ...state, count<\/span>: Math<\/span>.max(0<\/span>, state.count - 1<\/span>) };\n\u00a0 \u00a0 default<\/span>: return<\/span> state;\n\u00a0 }\n}\n\nfunction<\/span> Counter<\/span>(<\/span>) <\/span>{\n\u00a0 const<\/span> [state, dispatch] = useReducer(reducer, { count<\/span>: 0<\/span> });\n\u00a0 return<\/span> (\n\u00a0 \u00a0 <div<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <span<\/span>><\/span>{state.count}<\/span<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch({ type: 'add' })}>+<\/button<\/span>><\/span>\n\u00a0 \u00a0 \u00a0 <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch({ type: 'sub' })}>-<\/button<\/span>><\/span>\n\u00a0 \u00a0 <\/div<\/span>><\/span><\/span>\n\u00a0 );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nAsync Updates and Race Conditions<\/h3>\n\n\n\n
let<\/span> controller = new<\/span> AbortController();\n\nasync<\/span> function<\/span> search<\/span>(query<\/span>) <\/span>{\n\u00a0 controller.abort();\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/ cancel previous<\/span>\n\u00a0 controller = new<\/span> AbortController();\n\u00a0 const<\/span> res = await<\/span> fetch(`\/api?q=${encodeURIComponent<\/span>(query)}<\/span>`<\/span>, { signal<\/span>: controller.signal });\n\u00a0 const<\/span> data = await<\/span> res.json();\n\u00a0 renderResults(data);\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nPersisting State<\/h3>\n\n\n
function<\/span> save<\/span>(key, value<\/span>) <\/span>{\n\u00a0 localStorage.setItem(key, JSON<\/span>.stringify(value));\n}\nfunction<\/span> load<\/span>(key, fallback<\/span>) <\/span>{\n\u00a0 try<\/span> { return<\/span> JSON<\/span>.parse(localStorage.getItem(key)) ?? fallback; }\n\u00a0 catch<\/span> { return<\/span> fallback; }\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\nUsing Cloudinary With State<\/h3>\n\n\n\n
\/\/ Example: pick format and width from state to construct a Cloudinary URL<\/span>\nfunction<\/span> buildImageUrl<\/span>({ format, width, publicId }<\/span>) <\/span>{\n\u00a0 const<\/span> base = 'https:\/\/res.cloudinary.com\/demo\/image\/upload'<\/span>;\n\u00a0 const<\/span> transform = `f_${format}<\/span>,q_auto,w_${width}<\/span>,c_fill`<\/span>;\n\u00a0 return<\/span> `${base}<\/span>\/${transform}<\/span>\/${publicId}<\/span>.jpg`<\/span>; \/\/ publicId can omit extension if configured<\/span>\n}\n\n\/\/ State-driven rendering<\/span>\nconst<\/span> state = { prefersWebP<\/span>: true<\/span>, width<\/span>: 800<\/span>, publicId<\/span>: