Spring 2020 React State Management MVPs:

Hooks
Context
xState
react-query
Recoil*

*Recoil solves pesky perf challenges with orthogonal (https://abs.twimg.com/emoji/v2/... draggable="false" alt="😲" title="Astonished face" aria-label="Emoji: Astonished face">) state that should be understood before wielding

If you haven’t had the chance, I highly recommend @mcc_abe’s excellent Recoil talk from React Europe if you’re curious about the problems it solves and wtf orthogonal state is https://abs.twimg.com/emoji/v2/... draggable="false" alt="😂" title="Face with tears of joy" aria-label="Emoji: Face with tears of joy">

It’s like the toothpick of the React State Management Swiss Army Knife. https://youtu.be/_ISAA_Jt9kI ">https://youtu.be/_ISAA_Jt9...

react-query is a staple and handles managing remote state fetching data. https://youtu.be/seU46c6Jz7E 

https://youtu.be/seU46c6Jz... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="⚠️" title="Warning sign" aria-label="Emoji: Warning sign"> GraphQL is another option for this sort of thing but is more “viral” in your app. I’m personally less enthusiastic about that approach but understand why people love it. https://youtu.be/seU46c6Jz7E

xState is “lodash level essential” for me.

It’s worth spending a lot of time with to fully internalize the benefits. Timeless shit you’ll use well beyond React (and JS).

https://abs.twimg.com/emoji/v2/... draggable="false" alt="‼️" title="Double exclamation mark" aria-label="Emoji: Double exclamation mark"> Do not sleep on xState. https://egghead.io/courses/introduction-to-state-machines-using-xstate">https://egghead.io/courses/i...

React’s Context is practical and built in to React. https://abs.twimg.com/emoji/v2/... draggable="false" alt="👍🏼" title="Thumbs up (medium light skin tone)" aria-label="Emoji: Thumbs up (medium light skin tone)">

It needs to be understood and used with intention. It can cause serious performance issues if used naively or as a catch all solution

It’s great for libraries (even your internal ones)

https://abs.twimg.com/emoji/v2/... draggable="false" alt="💯" title="Hundred points symbol" aria-label="Emoji: Hundred points symbol"> Essential. https://joelhooks.com/react-context ">https://joelhooks.com/react-con...

Last but not least:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Medium star" aria-label="Emoji: Medium star">https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Medium star" aria-label="Emoji: Medium star"> React Hooks https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Medium star" aria-label="Emoji: Medium star">https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Medium star" aria-label="Emoji: Medium star">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🍞" title="Bread" aria-label="Emoji: Bread"> and https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧈" title="Butter" aria-label="Emoji: Butter">

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🚗" title="Automobile" aria-label="Emoji: Automobile"> Hooks drive your components.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💪🏽" title="Flexed biceps (medium skin tone)" aria-label="Emoji: Flexed biceps (medium skin tone)"> Flexible and often reusable.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🤩" title="Star-struck" aria-label="Emoji: Star-struck"> Hooks are just React.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👆" title="Up pointing backhand index" aria-label="Emoji: Up pointing backhand index"> Everything in this list is using Hooks.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="💖" title="Sparkling heart" aria-label="Emoji: Sparkling heart"> You’ll use Hooks the most.

https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐️" title="Medium star" aria-label="Emoji: Medium star"> Critical knowledge!! https://egghead.io/courses/simplify-react-apps-with-react-hooks">https://egghead.io/courses/s...

There’s a ton of other solutions and alternatives

I avoid anything that makes me change from “This is a React App” to “This is an X app”

Most of the tools in this list have alternatives and incumbent solutions to explore

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔥" title="Fire" aria-label="Emoji: Fire"> This list is just what I’d use as of today!

I’ve been interviewing maintainers of all these libraries, reading, watching talks, taking notes, building examples, and applying my couple decades of experience building UIs to this list.

Still researching and gathering facts to translate all of this into a cohesive curriculum!