The document discusses the evolution of state management in React, from mixins to hooks. It covers older approaches like mixins, higher order components (HOCs), and render props. It then discusses the introduction of hooks in React 16.8, including the useState and useEffect hooks. It shows how hooks allow moving logic and state out of components into custom hooks. Finally, it discusses global state management and introducing context and custom hooks to share state across components without prop drilling.

1. State Management
in a World of Hooks
Adam Klein
Image by Kurt Deiner from Pixabay

2. React 0.X
Mixins

3. Mixins
const MouseMixin = {
getInitialState() {
return { x: 0, y: 0 }
},
handleMouseMove(event) {
this.setState({
x: event.clientX,
y: event.clientY
})
}
}

4. React 15+
Higher Order Components

5. Higher Order Component (HOC)
const AppWithLog = logProps(App);

6. Unwrapping our components

7. Wrapper Hell

8. React 15+
Render Props

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. 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. 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. React Conf 2018

13. Function StateHook = +
React

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. 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>
);
};

17. useState()
useState()
useEffect()
Component
useState()
useState()
useEffect()
Component
useState()
useState()
useEffect()

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. 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

20. Credit:
https://twitter.com/prchdk

21. Sharing State
GIF Credit: https://www.youtube.com/channel/UCuC9HfR6o-tJPjxZEbWJeLQ

22. Lift State Up
Photo Credit: Max Ellis

23. Flux

24. React Context

25. Provider
State
React Context

26. Provider
State
React Context

27. Use Hooks
Share data between components
Avoid props drilling
React Context

28. Provider1(state1)
Provider2(state2)
Provider3(state3)
Provider4(state4)
Components

29. const App = () => (
<Layout>
<UsersProvider>
<Header />
</UsersProvider>
<AccountsProvider>
<AccountScreen />
</AccountsProvider>
<Footer />
</Layout>
);

30. Provider
State

31. Provider
State Where is my state? 😢

32. <StockProvider/>
Title
Price
<Headline/>
Render Bailout

33. <StockProvider/>
Title
Price
<Headline/>
What’s the title?
Render Bailout

34. <StockProvider/>
Title
Price
<Headline/>
Here’s the new price
What’s the title?
Render Bailout

35. <StockProvider/>
Title
Price
<Headline/>
Ummmm…. I just want the title
Render Bailout
Here’s the new price

36. <StockProvider/>
Title
Price
<Headline/>
Ummmm…. I just want the title
Render Bailout
Here’s the new price

37. StateProvider
State
Component
ActionsProvider
Actions

38. When Context isn't Enough

39. Global State Management

40. <App />
<Layout />
<Header /> <Accounts />
<User />
Store
Users Accounts
State Management React Component Tree

41. Direct Subscriptions

43. const App = () => {
const [user, userActions] = useUser();
return (
...
);
};

44. const App = ({ pageSize }) => {
const [user, userActions] = useUser();
const [posts] = usePosts(user.id, pageSize);
return (
...
);
};

46. Hooks
Redux
MobX
useState/useReducer
reducer + actions
@observable
State
useMemo
reselect
@computed
Computed
useEffect
middleware
autorun/reaction
Side Effects

47. Local/Context => State Management
Large refactor

48. What if we want it all?

49. Introducing
Reusable

50. Local State
Component 1

51. Local State
Component 2
Component 1

52. Custom Hook
Component 1
Component 2

53. Store
Component 1
Component 2
createStore( )

54. Store
Component 1
Component 2
createStore( )
I just want the title!

55. Store 1
Store 2

56. Store 1
Router Context
Store 2

57. Store 1
Router Context
Custom Hook
Store 2

58. Component 1
Store 1
Component 2

59. Package
Component 1
Component 2
Store 1

60. App 1
Package
Component 1
Component 2
Store 1
App 2

61. Live Demo

62. Global State Management
Using Hooks

63. https://github.com/reusablejs/reusable

64. Today’s legacy code is
yesterday’s most popular tool

65. Thank You
https://adamklein.dev
https://github.com/reusablejs/reusable
https://twitter.com/adamklein500