react state management

Explore "react state management" with insightful episodes like "712: 2024 Predictions" and "State In React" from podcasts like ""Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

Episodes (2)

712: 2024 Predictions

Wes and Scott give their predictions for 2024 in JavaScript, frameworks, server-side JS, tooling, CSS, developer ecosystem, and AI tooling.

Show Notes

00:10 Welcome
01:10 Syntax Brought to you by Sentry
02:00 Types in JS will have real movement
05:10 Temporal API will ship in 1 browser
06:38 Perf tooling gets easy for everyone to understand
07:32 CSS continues to get better where you need less JS
08:35 The year of the server in frameworks
10:32 Svelte v5 is very fast
SvelteKit • Web development, streamlined
12:04 Astro is going to have a good year
Astro
4 Web Devs, 1 App Idea (Salma Alam-Naylor, Scott Tolinski, Eve Porcello)
14:22 React server components
dai-shi/waku: ⛩️ The minimal React framework
Waku
19:45 Remix moves away from page-based loaders, to component loaders
20:52 Hono will become more ubiquitous
Hono - Ultrafast web framework for the Edges
23:23 Node will introduce TypeScript support via loaders
24:48 We will see a route matching Proposal move ahead
URL Pattern Standard
26:34 Bun releases full node compat
27:34 We will see a new Linter + formatter entirely replace
Language support | Biome
HTML support · Issue #1326 · oxc-project/oxc
Prettier · Opinionated Code Formatter
31:44 New TypeScript typechecker
32:42 Lightning CSS pops - or does it?
34:37 You’ll hear more about Rspack and Turbopack
35:55 Vite isn’t going to release anything big in 2024
Vite | Next Generation Frontend Tooling
36:55 CSS contrast-color will land in chrome
37:27 Relative color will land in all major browsers
37:48 Scroll animation landing in 2 browsers
38:40 The year of CSS discovery
41:20 Safari will Ship 3 missing PWA Support
44:10 Firefox usage will continue to slip
47:43 Paid Arc features
47:55 More XR web experiences as Apple releases in Vision Pro
49:07 AI Tooling
Galileo AI
v0 by Vercel
Transformers.js
51:07 Small Models that run in the browser
52:08 Apps get sherlocked by OpenAI
53:24 On prem corporate AI
54:15 Sick Picks

enJanuary 03, 2024

temporal api

css evolution

react state management

ai in web development

javascript types

State In React

In this episode of Syntax, Scott and Wes talk about state in React: local state, global state, UI state, data state, caching, API data and more!

LogRocket - Sponsor

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.

Freshbooks - Sponsor

Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section.

Show Notes

3:38 - What is state?

4:58 - What kind of things are kept in state?

Data
- Temporary client side data
  - From forms, button clicks, etc.
- Cached server data
- Data from API
UI status
- AKA isModalOpen
- isToggled

12:48 - Global state vs. Local state

Ask yourself: does the data need to be accessed outside this component?
- If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.
Do you count Apollo API calls as global state?

21:15 - Managing Local state

useState, setState
Passing state & update functions down
State machines

31:12 - Approaches to Global state

Redux
- Complicated, hard to learn
- Very useful, organized and structured
- Actions, reducers and more
- Time traveling do to nature of store
- Immutability
- Tons of Redux based hooks libs
Mobx
- Based on Observables
  - An Observable is like a Stream and allows to pass zero or more events where the callback is called for each event. Often Observable is preferred over Promise because it provides the features of Promise and more.
Context
- Functions just work and update global state.
- Downside is there are no fancy tools
Apollo
- Apollo quires for data in global cache
- Apollo client for global UI state
  - Not quite there, isn’t super elegant