Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

State managment in a world of hooks

174 views

Published on

We are at an intersection of 2 paths. One is about the evolution of how we share code between React components, and the second is about how we share data between them.

In this talk, we will explore how we can leverage the power of hooks in global state management, what are the benefits and drawbacks to using Context API, and what alternatives do we have.

Published in: Software
  • Be the first to comment

  • Be the first to like this

State managment in a world of hooks

  1. 1. State Management in a World of Hooks Adam Klein Image by Kurt Deiner from Pixabay
  2. 2. React 0.X Mixins
  3. 3. Mixins const MouseMixin = { getInitialState() { return { x: 0, y: 0 } }, handleMouseMove(event) { this.setState({ x: event.clientX, y: event.clientY }) } }
  4. 4. React 15+ Higher Order Components
  5. 5. Higher Order Component (HOC) const AppWithLog = logProps(App);
  6. 6. Unwrapping our components
  7. 7. Wrapper Hell
  8. 8. React 15+ Render Props
  9. 9. Render Props const App = () => ( <div> <Mouse render={({ x, y }) => ( // The render prop gives us the state we need // to render whatever we want here. <h1>The mouse position is ({x}, {y})</h1> )}/> </div> );
  10. 10. Render Props const App = () => ( <div> <Mouse render={({ x, y }) => ( // The render prop gives us the state we need // to render whatever we want here. <h1>The mouse position is ({x}, {y})</h1> )}/> </div> );
  11. 11. const MyForm = () => ( <DataFetcher> {( data ) => ( <Actions> {( actions ) => ( <Translations> {( translations ) => ( <Styles> {(styles) => ( <form style={styles}> <input type="text" value={data.value} /> <button onClick={action.submit}> { translations.submitText } </button> </form> )} </Styles> )} </Translations> )} </Actions> )} </DataFetcher> );
  12. 12. React Conf 2018
  13. 13. Function StateHook = + React
  14. 14. const App = () => { const [isLoading, setIsLoading] = useState(false); const [user, setUser] = useState({}); return ( <div style={{ height: '100%' }}> Welcome { user } <button onClick={() => setRole(ROLES.ADMIN)}> Make Admin </button> </div> ); };
  15. 15. const App = () => { const [isLoading, setIsLoading] = useState(false); const [user, setUser] = useState({}); return ( <div style={{ height: '100%' }}> Welcome { user } <button onClick={() => setRole(ROLES.ADMIN)}> Make Admin </button> </div> ); };
  16. 16. useState() useState() useEffect() Component useState() useState() useEffect() Component useState() useState() useEffect()
  17. 17. const useUser = () => { const ROLES = { ADMIN: 'ADMIN', CLIENT: 'CLIENT' }; const [user, setUser] = useState(null); const setAdmin = useCallback((role) => { setUser({ ...user, role }); }, [user]); return [user, setAdmin, ROLES]; }; Custom Hook
  18. 18. const useUser = () => { const ROLES = { ADMIN: 'ADMIN', CLIENT: 'CLIENT' }; const [user, setUser] = useState(null); const setAdmin = useCallback((role) => { setUser({ ...user, role }); }, [user]); return [user, setAdmin, ROLES]; }; Custom Hook
  19. 19. Credit: https://twitter.com/prchdk
  20. 20. Sharing State GIF Credit: https://www.youtube.com/channel/UCuC9HfR6o-tJPjxZEbWJeLQ
  21. 21. Lift State Up Photo Credit: Max Ellis
  22. 22. Flux
  23. 23. React Context
  24. 24. Provider State React Context
  25. 25. Provider State React Context
  26. 26. Use Hooks Share data between components Avoid props drilling React Context
  27. 27. Provider1(state1) Provider2(state2) Provider3(state3) Provider4(state4) Components
  28. 28. const App = () => ( <Layout> <UsersProvider> <Header /> </UsersProvider> <AccountsProvider> <AccountScreen /> </AccountsProvider> <Footer /> </Layout> );
  29. 29. Provider State
  30. 30. Provider State Where is my state? 😢
  31. 31. <StockProvider/> Title Price <Headline/> Render Bailout
  32. 32. <StockProvider/> Title Price <Headline/> What’s the title? Render Bailout
  33. 33. <StockProvider/> Title Price <Headline/> Here’s the new price What’s the title? Render Bailout
  34. 34. <StockProvider/> Title Price <Headline/> Ummmm…. I just want the title Render Bailout Here’s the new price
  35. 35. <StockProvider/> Title Price <Headline/> Ummmm…. I just want the title Render Bailout Here’s the new price
  36. 36. StateProvider State Component ActionsProvider Actions
  37. 37. When Context isn't Enough
  38. 38. Global State Management
  39. 39. <App /> <Layout /> <Header /> <Accounts /> <User /> Store Users Accounts State Management React Component Tree
  40. 40. Direct Subscriptions
  41. 41. const App = () => { const [user, userActions] = useUser(); return ( ... ); };
  42. 42. const App = ({ pageSize }) => { const [user, userActions] = useUser(); const [posts] = usePosts(user.id, pageSize); return ( ... ); };
  43. 43. Hooks Redux MobX useState/useReducer reducer + actions @observable State useMemo reselect @computed Computed useEffect middleware autorun/reaction Side Effects
  44. 44. Local/Context => State Management Large refactor
  45. 45. What if we want it all?
  46. 46. Introducing Reusable
  47. 47. Local State Component 1
  48. 48. Local State Component 2 Component 1
  49. 49. Custom Hook Component 1 Component 2
  50. 50. Store Component 1 Component 2 createStore( )
  51. 51. Store Component 1 Component 2 createStore( ) I just want the title!
  52. 52. Store 1 Store 2
  53. 53. Store 1 Router Context Store 2
  54. 54. Store 1 Router Context Custom Hook Store 2
  55. 55. Component 1 Store 1 Component 2
  56. 56. Package Component 1 Component 2 Store 1
  57. 57. App 1 Package Component 1 Component 2 Store 1 App 2
  58. 58. Live Demo
  59. 59. Global State Management Using Hooks
  60. 60. https://github.com/reusablejs/reusable
  61. 61. Today’s legacy code is yesterday’s most popular tool
  62. 62. Thank You https://adamklein.dev https://github.com/reusablejs/reusable https://twitter.com/adamklein500

×