November 20th, 2024 × #javascript#state-management#front-end
This episode covers different approaches to state management in JavaScript, including reducer-based, mutation-based and atom-based state. Buzzwords like reactive state, stores, immutability vs mutability, state updaters and more are also explained.
Wes Bos Host
Scott Tolinski Host
Scott and Wes serve up state management in JavaScript, breaking down key concepts like reactive state, state updaters, and global vs local state. They also explore various approaches and libraries, mutation-based state, and tools like Zustand and xState, to help you manage state like a pro.
Show Notes
- 00:00 Welcome to Syntax!
- 01:22 Brought to you by Sentry.io.
- 03:10 What is state?
- 03:29 Common state jargon.
- 03:48 Reactive State.
- 04:14 Store.
- 04:46 Immutable vs Mutable State.
- 05:53 State updaters.
- 06:15 Signals.
- 06:49 Observables.
- 07:07 UI is a function of state.
- 08:39 State Machine.
- 10:58 Binding state.
- 11:36 Global vs local.
- 11:49 Computed State, derived state, selector state.
- 12:41 Approaches to state management.
- 12:52 Reducer based.
- 16:39 Mutation based state.
- 21:17 Atom based state.
- 25:15 Ways to hold state.
- 25:17 Holding state in an object.
- 27:38 Holding state in the URL.
- 29:34 Holding state in IndexedDB, local storage, and cookies.
- 32:16 Holding state with FormData.
- 33:56 Holding state with Signals.
- 37:27 Holding state with the server database.
- 38:55 Global State vs Component State.
- 40:39 Sharing state.
- 42:58 State libraries.
- 45:26 Zustand.
- 50:24 Jotai.
- 51:50 xState.
- 54:56 Easy Peasy.
- 55:24 Pinia.
- 56:01 TanStack Query.
- 57:02 Sick Picks + Shameless Plugs.
Sick Picks
- Scott: Cremo Mens Body Wash, Bentgo Adult.
- Wes: Adult Bento Box.
Shameless Plugs
- Wes: Syntax on YouTube.
Syntax: X Instagram Tiktok LinkedIn Threads
Wes: X Instagram Tiktok LinkedIn Threads