Discover the ins and outs of state management in React, covering local vs. global states and how to lift state effectively. The hosts offer practical strategies for managing UI status and API data, along with insights on naming conventions to enhance code clarity. They dive into tools like Redux and Mobx for global state management, discussing their complexities and benefits. Additionally, hear about the evolution of state management techniques and some fun personal anecdotes that make the tech talk even more relatable!
55:13
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Defining State
State represents an application's condition at any given moment, encompassing data and UI elements.
It includes data from forms, server caches, API responses, and UI statuses like modal visibility.
volunteer_activism ADVICE
State Naming Conventions
Consider how you name state variables and functions for clarity.
Consistent naming, like prefixing booleans with "is", improves readability and maintainability.
question_answer ANECDOTE
Refactoring for Clarity
Scott Talinsky refactored Level Up Tutorials to improve state management after a difficult bug.
He standardized naming conventions (e.g., "isTutorialVisible") for better code transparency.
Get the Snipd Podcast app to discover more snips from this episode
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.
Syntax - Tasty Web Development Treats