Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

State In React

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">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!</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="11" data-line-end="12"> 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 <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="13" data-line-end="14"> <a id="Freshbooks__Sponsor_13" name= "Freshbooks__Sponsor_13"></a>Freshbooks - Sponsor</h2> <p class="has-line-data" data-line-start="15" data-line-end="16"> Get a 30 day free trial of Freshbooks at <a href= "https://freshbooks.com/syntax">freshbooks.com/syntax</a> and put SYNTAX in the “How did you hear about us?” section.</p> <h2 class="code-line" data-line-start="17" data-line-end="18"> <a id="Show_Notes_17" name="Show_Notes_17"></a>Show Notes</h2> <p class="has-line-data" data-line-start="19" data-line-end="20"> 3:38 - What is state?</p> <p class="has-line-data" data-line-start="21" data-line-end="22"> 4:58 - What kind of things are kept in state?</p> <ul> <li class="has-line-data" data-line-start="23" data-line-end="28"> Data <ul> <li class="has-line-data" data-line-start="24" data-line-end="26"> Temporary client side data <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> From forms, button clicks, etc.</li> </ul> </li> <li class="has-line-data" data-line-start="26" data-line-end="27"> Cached server data</li> <li class="has-line-data" data-line-start="27" data-line-end="28"> Data from API</li> </ul> </li> <li class="has-line-data" data-line-start="28" data-line-end="32"> UI status <ul> <li class="has-line-data" data-line-start="29" data-line-end="30"> AKA isModalOpen</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> isToggled</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 12:48 - Global state vs. Local state</p> <ul> <li class="has-line-data" data-line-start="34" data-line-end="36"> Ask yourself: does the data need to be accessed outside this component? <ul> <li class="has-line-data" data-line-start="35" data-line-end="36"> If data does need to be accessed a little higher, you can simply move where that state lives. React calls this “lifting state”.</li> </ul> </li> <li class="has-line-data" data-line-start="36" data-line-end="38"> Do you count Apollo API calls as global state?</li> </ul> <p class="has-line-data" data-line-start="38" data-line-end="39"> 21:15 - Managing Local state</p> <ul> <li class="has-line-data" data-line-start="40" data-line-end="41"> useState, setState</li> <li class="has-line-data" data-line-start="41" data-line-end="42"> Passing state & update functions down</li> <li class="has-line-data" data-line-start="42" data-line-end="44"> State machines</li> </ul> <p class="has-line-data" data-line-start="44" data-line-end="45"> 31:12 - Approaches to Global state</p> <ul> <li class="has-line-data" data-line-start="46" data-line-end="53"> <p class="has-line-data" data-line-start="46" data-line-end="47"> Redux</p> <ul> <li class="has-line-data" data-line-start="47" data-line-end="48"> Complicated, hard to learn</li> <li class="has-line-data" data-line-start="48" data-line-end="49"> Very useful, organized and structured</li> <li class="has-line-data" data-line-start="49" data-line-end="50"> Actions, reducers and more</li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Time traveling do to nature of store</li> <li class="has-line-data" data-line-start="51" data-line-end="52"> Immutability</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> Tons of Redux based hooks libs</li> </ul> </li> <li class="has-line-data" data-line-start="53" data-line-end="56"> <p class="has-line-data" data-line-start="53" data-line-end="54"> Mobx</p> <ul> <li class="has-line-data" data-line-start="54" data-line-end="56"> Based on Observables <ul> <li class="has-line-data" data-line-start="55" data-line-end="56"> 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.</li> </ul> </li> </ul> </li> <li class="has-line-data" data-line-start="56" data-line-end="60"> <p class="has-line-data" data-line-start="56" data-line-end="57"> Context</p> <ul> <li class="has-line-data" data-line-start="57" data-line-end="58"> Functions just work and update global state.</li> <li class="has-line-data" data-line-start="58" data-line-end="60"> Downside is there are no fancy tools</li> </ul> </li> <li class="has-line-data" data-line-start="60" data-line-end="65"> <p class="has-line-data" data-line-start="60" data-line-end="61"> Apollo</p> <ul> <li class="has-line-data" data-line-start="61" data-line-end="62"> Apollo quires for data in global cache</li> <li class="has-line-data" data-line-start="62" data-line-end="65"> Apollo client for global UI state <ul> <li class="has-line-data" data-line-start="63" data-line-end="65"> Not quite there, isn’t super elegant</li> </ul> </li> </ul> </li> </ul> <h2 class="code-line" data-line-start="65" data-line-end="66"> <a id="Links_65" name="Links_65"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://thinkso.com/">Thinkso</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://wesbos.com/learn-node/">Learn Node!</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://docs.meteor.com/api/session.html">Meteor Session</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://github.com/davidkpiano/xstate/tree/master/packages/xstate-react#readme"> xstate-react</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href="https://reactjs.org/docs/context.html">React Context</a></li> <li class="has-line-data" data-line-start="71" data-line-end="72"> <a href="https://mobx.js.org/">Mobx</a></li> <li class="has-line-data" data-line-start="72" data-line-end="73"> <a href= "https://github.com/ctrlplusb/easy-peasy">easy-peasy</a></li> <li class="has-line-data" data-line-start="73" data-line-end="74"> <a href="https://hype.codes/">hype.codes</a></li> <li class="has-line-data" data-line-start="74" data-line-end="75"> <a href= "https://gist.github.com/stolinski/2d9545e19dd67bda64143cb1aae04ac0"> providerCompose.js</a></li> <li class="has-line-data" data-line-start="75" data-line-end="76"> <a href="https://relay.dev/">Relay</a></li> <li class="has-line-data" data-line-start="76" data-line-end="78"> <a href="https://reactpodcast.simplecast.fm/">React Podcast</a></li> </ul> <h2 class="code-line" data-line-start="78" data-line-end="79"> <a id="_SIIIIICK__PIIIICKS__78" name= "_SIIIIICK__PIIIICKS__78"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="79" data-line-end="80"> Scott: <a href= "https://www.redhat.com/en/command-line-heroes">Command Line Heroes</a></li> <li class="has-line-data" data-line-start="80" data-line-end="82"> Wes: <a href= "https://drop.com/buy/massdrop-ctrl-mechanical-keyboard">MASSDROP CTRL MECHANICAL KEYBOARD</a></li> </ul> <h2 class="code-line" data-line-start="82" data-line-end="83"> <a id="Shameless_Plugs_82" name="Shameless_Plugs_82"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="83" data-line-end="84"> Scott: <a href= "https://www.leveluptutorials.com/pro">LevelUpTutorials - Gatsby Ecommerce</a> — Subscribe before price goes up!</li> <li class="has-line-data" data-line-start="84" data-line-end="86"> Wes: <a href="https://wesbos.com/courses/">All Courses</a> — Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="86" data-line-end="87"> <a id="Tweet_us_your_tasty_treats_86" name= "Tweet_us_your_tasty_treats_86"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="92" data-line-end="93"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="93" data-line-end="94"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

Aplikace Youradio Talk

Pro přehrání dalších podcastů se prosím registrujte.

State In React

Poslechněte si podcast