850: Manage State in JavaScript Like a Pro!

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, Technology, News

4.9 • 1.2K Ratings

🗓️ 20 November 2024

⏱️ 62 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

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. Solid.js Signal Docs. 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. Syntax Shows. 29:34 Holding state in IndexedDB, local storage, and cookies. 32:16 Holding state with FormData. 33:56 Holding state with Signals. Signals Proposal. 37:27 Holding state with the server database. 38:55 Global State vs Component State. Habit Path. 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. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Transcript

Click on a timestamp to play from that location

0:00.0	Welcome to Syntax. Today, we got a show for you on state management in JavaScript.
0:05.3	This is kind of an interesting one because we all have to manage state in our application.
0:10.1	And there are many different libraries out there. There's many different approaches.
0:14.0	You're hearing all these words like signals, reducers, actions, immutable, reactivity, state machine, global, local.
0:23.5	If you're using React, you're using a different framework, you're using vanilla JavaScript,
0:27.0	there's all kinds of things to sort of consider. So we're going to do a show today that will
0:31.5	sort of break down the different state management approaches, different ways to hold state,
0:37.1	things that you should consider,
0:38.5	as well as go through some of the more popular options in the state management world right now.
0:43.7	My name is Westboss.
0:45.3	I am a developer from Canada with me as always.
0:48.4	Scott, how are you doing, Scott?
0:50.1	I'm doing good, man.
0:51.1	Just chilling.
0:52.5	Actually, literally chilling.
0:53.9	It's cold here in Colorado. So, yeah.
0:56.5	Oh, man. We have, oh, yeah, we had to open the windows last night. It's like summer weather still here, which is wild.
1:03.7	Oh, yeah. Considering it was snowing this time last year.
1:07.8	We have the classic super cold at night, super hot during the day flow going on right now.
1:14.1	Oh, I'm into that. Yeah. Open the windows. Let me freeze. Yeah. And then open the windows and let me cook during
1:19.3	the day. That's right. Real quick, let's talk about something at Century is behind. It's the
1:25.9	open source pledge.com. So they just rolled
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.