Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React State - The Good, the Bad and the Ugly - ArmadaJS

React State - The Good, the Bad and the Ugly - ArmadaJS

4ff4d0c579ce1bdbe505d8317e158a20?s=128

Ivan Jovanovic

October 19, 2019
Tweet

Transcript

  1. REACT STATE The Good, the Bad and the Ugly

  2. Ivan Jovanovic https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com

  3. Ivan: Hey man, how's life? Bob: All good! You need

    to see this cool project we are working on! Ivan: Awesome, what is it about? Bob: It's great, we are using this awesome stack with React, Mobx, Graphql running on AWS Lambda Ivan: Sounds interesting. What is project about? Bob: Ah right, we are building a blog for a real estate company.
  4. REAL ESTATE BLOG?

  5. None
  6. WHAT IS WRONG HERE?

  7. None
  8. None
  9. WHAT DO WE SEE HERE? • Text • Pictures •

    Links • Input fields • Buttons
  10. WHAT IS DIFFERENT?

  11. STATE

  12. State: the particular condition that something is in at a

    specific time. Dictionary.com
  13. STATE TYPES • Application State (also known as Program State)

    represents the totality of everything necessary to keep your application running • Resource State refers to the state of the resources being stored on the server. These can be files, images, database records, etc. • Session State keeps track of user interaction during a browser session
  14. TECHCRUNCH DISRUPT SAN FRANCISCO - SEPTEMBER 2012. Mark Zuckerberg: "Our

    Biggest Mistake Was Betting Too Much On HTML5".
  15. REACT GETS OPEN SOURCED - MAY 2013. Jordan Walke introduced

    React at JS ConfUS.
  16. REVOLUTION STARTED

  17. 2014. FIRST REACT CONF

  18. FIRST COMPANIES THAT USED REACT

  19. BETTER USER INTERFACES

  20. HISTORY OF REACT STATE

  21. HISTORY OF REACT STATE • Component State • Flux •

    Redux • GraphQL (Relay) • MobX • React 16 - Context API / React Hooks
  22. COMPONENT STATE

  23. None
  24. None
  25. COMPONENT STATE PROS • Comes with React • Every component

    has it out of the box • Easy to use • Easy to learn
  26. COMPONENT STATE CONS • Hard to exchange state between components

    • Hard to update state from another component • Complicate to maintain when app becomes big
  27. FLUX

  28. None
  29. FLUX PROS • Simple data flow • Unidirectional data flow

    • Easily handling data across components • Components listen to the store and react on changes
  30. FLUX CONS • Mutable state • Multiple stores • Multiple

    sources of truth • Boilerplate
  31. REDUX

  32. None
  33. None
  34. REDUX PROS • Simple data flow • Unidirectional data flow

    • Easily handling data across components • Components listen to the store and react on changes • One store • Immutable store • No dispatcher
  35. REDUX CONS • Boilerplate • There is always a middleware...

  36. GRAPHQL

  37. None
  38. RELAY

  39. None
  40. None
  41. RELAY PROS • Made for data-driven applications • Simple data

    flow • Descriptive components • Solves client-server data flow
  42. RELAY CONS • Learning • A lot of magic in

    the background
  43. MOBX

  44. None
  45. MOBX PROS • Reactive programming, everything is a stream (observable)

    • Store can do anything • No boilerplate • No middlewares
  46. MOBX CONS • No specific standard, anyone can use anything,

    too much freedom • Reactive programming is hard • Sometimes is really hard to debug
  47. REACT 16

  48. CONTEXT API

  49. None
  50. None
  51. REACT HOOKS

  52. None
  53. CONCLUSION • Pick wisely, based on the size of the

    project and previous knowledge • Popular doesn't always mean the best • Learn the basics (how does setState work) • Combine (if needed) • Every new package for handling state was built to fix something. But, can we have a perfect package for state?
  54. Thank you! Blog ivanjov.com Twitter @ivanjov96