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
Links Thinkso
Learn Node!
Meteor Session
xstate-react
React Context
Mobx
easy-peasy
hype.codes
providerCompose.js
Relay
React Podcast
××× SIIIIICK ××× PIIIICKS ××× Scott: Command Line Heroes
Wes: MASSDROP CTRL MECHANICAL KEYBOARD
Shameless Plugs Scott: LevelUpTutorials - Gatsby Ecommerce — Subscribe before price goes up!
Wes: All Courses — Use the coupon code ‘Syntax’ for $10 off!
Tweet us your tasty treats! Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets