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

16.
useState()
useState()
useEffect()
Component
useState()
useState()
useEffect()
Component
useState()
useState()
useEffect()

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.
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.
Credit:
https://twitter.com/prchdk

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

21.
Lift State Up
Photo Credit: Max Ellis

22.
Flux

23.
React Context

24.
Provider
State
React Context

25.
Provider
State
React Context

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

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

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

29.
Provider
State

30.
Provider
State Where is my state? 😢

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

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

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

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

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

36.
StateProvider
State
Component
ActionsProvider
Actions

37.
When Context isn't Enough

38.
Global State Management

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

40.
Direct Subscriptions

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

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

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

44.
Local/Context => State Management
Large refactor

45.
What if we want it all?

46.
Introducing
Reusable

47.
Local State
Component 1

48.
Local State
Component 2
Component 1

49.
Custom Hook
Component 1
Component 2

50.
Store
Component 1
Component 2
createStore( )

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

52.
Store 1
Store 2

53.
Store 1
Router Context
Store 2

54.
Store 1
Router Context
Custom Hook
Store 2

55.
Component 1
Store 1
Component 2

56.
Package
Component 1
Component 2
Store 1

57.
App 1
Package
Component 1
Component 2
Store 1
App 2

58.
Live Demo

59.
Global State Management
Using Hooks

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

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

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