-
Notifications
You must be signed in to change notification settings - Fork 502
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create 850 - Manage State in JavaScript Like a Pro.md (#1902)
- Loading branch information
1 parent
b037c79
commit ab08528
Showing
1 changed file
with
72 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| --- | ||
| number: 850 | ||
| title: Manage State in JavaScript Like a Pro! | ||
| date: 1732100400000 | ||
| url: https://traffic.libsyn.com/syntax/Syntax_-_850.mp3 | ||
| youtube_url: https://www.youtube.com/watch?v=7i1f4PKSlxo | ||
| --- | ||
|
|
||
| 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](#t=00:00)** Welcome to Syntax! | ||
| * **[01:22](#t=01:22)** Brought to you by [Sentry.io](https://opensourcepledge.com/). | ||
| * **[03:10](#t=03:10)** What is state? | ||
| * **[03:29](#t=03:29)** Common state jargon. | ||
| * **[03:48](#t=03:48)** Reactive State. | ||
| * **[04:14](#t=04:14)** Store. | ||
| * **[04:46](#t=04:46)** Immutable vs Mutable State. | ||
| * **[05:53](#t=05:53)** State updaters. | ||
| * **[06:15](#t=06:15)** Signals. | ||
| * [Solid.js Signal Docs](https://docs.solidjs.com/concepts/signals). | ||
| * **[06:49](#t=06:49)** Observables. | ||
| * **[07:07](#t=07:07)** UI is a function of state. | ||
| * **[08:39](#t=08:39)** State Machine. | ||
| * **[10:58](#t=10:58)** Binding state. | ||
| * **[11:36](#t=11:36)** Global vs local. | ||
| * **[11:49](#t=11:49)** Computed State, derived state, selector state. | ||
| * **[12:41](#t=12:41)** Approaches to state management. | ||
| * **[12:52](#t=12:52)** Reducer based. | ||
| * **[16:39](#t=16:39)** Mutation based state. | ||
| * **[21:17](#t=21:17)** Adam based state. | ||
| * **[25:15](#t=25:15)** Ways to hold state. | ||
| * **[25:17](#t=25:17)** Holding state in an object. | ||
| * **[27:38](#t=27:38)** Holding state in the URL. | ||
| * [Syntax Shows](https://syntax.fm/shows?perPage=20). | ||
| * **[29:34](#t=29:34)** Holding state in IndexedDB, local storage, and cookies. | ||
| * **[32:16](#t=32:16)** Holding state with FormData. | ||
| * **[33:56](#t=33:56)** Holding state with Signals. | ||
| * [Signals Proposal](https://github.com/tc39/proposal-signals). | ||
| * **[37:27](#t=37:27)** Holding state with the server database. | ||
| * **[38:55](#t=38:55)** Global State vs Component State. | ||
| * [Habit Path](https://habitpath.io/landing). | ||
| * **[40:39](#t=40:39)** Sharing state. | ||
| * **[42:58](#t=42:58)** State libraries. | ||
| * **[45:26](#t=45:26)** [Zustand](https://zustand-demo.pmnd.rs/). | ||
| * **[50:24](#t=50:24)** [Jotai](https://jotai.org/). | ||
| * **[51:50](#t=51:50)** [xState](https://xstate.js.org/). | ||
| * **[54:56](#t=54:56)** [Easy Peasy](https://easy-peasy.vercel.app/). | ||
| * **[55:24](#t=55:24)** [Pinia](https://pinia.vuejs.org/). | ||
| * **[56:01](#t=56:01)** [TanStack Query](https://tanstack.com/query/latest). | ||
| * **[57:02](#t=57:02)** Sick Picks + Shameless Plugs. | ||
|
|
||
| ### Sick Picks | ||
|
|
||
| - Scott: [Cremo Mens Body Wash](https://amzn.to/3BTspDv), [Bentgo Adult](https://amzn.to/4fdYe8r). | ||
| - Wes: [Adult Bento Box](https://amzn.to/4fbRTdz). | ||
|
|
||
| ### Shameless Plugs | ||
|
|
||
| - Wes: [Syntax on YouTube](www.youtube.com@syntaxfm). | ||
|
|
||
|
|
||
| ### Hit us up on Socials! | ||
|
|
||
| Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm) | ||
|
|
||
| Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos) | ||
|
|
||
| Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski) | ||
|
|
||
| Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor) |