React hooks shook the foundation of our React code, and how we think about state management. The long debated Redux vs. MobX theme has shifted to whether context + useReducer is an alternative, and whether state management is necessary at all. In this talk we will explore how we can use the benefits of hooks in state management, such as separation of concerns, declarative side effects, and simple code reuse.

1. State Management
in a World of Hooks
Maayan Glikser Adam Klein
&

2. Maayan Glikser
Developer, Consultant, Trainer
CTO @ 500Tech

3. What are hooks?

4. React Conf 2018

5. Hooks let us organize stateful
logic inside components into
reusable isolated units.

6. How did we share logic between
components in the past?

8. React 0.x
Mixins

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

10. Mixins
const App = React.createClass({
// Use the mixin!
mixins: [ MouseMixin ],
render() {
const { x, y } = this.state
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})

11. React 15+
Higher Order Components

12. Higher Order Component (HoC)
function logProps(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
// Wraps the input component in a container, without mutating it. Good!
return <WrappedComponent {...this.props} />;
}
}
}

13. Higher Order Component (HoC)
const AppWithLog = logProps(App);

15. Wrapper Hell

17. Render Props
class Mouse extends React.Component {
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
{this.props.render(this.state)}
</div>
)
}
}

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

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

20. Hooks

21. Hooks are stateful
small units of logic
which are easy to reuse and test.

22. const App = () => {
const [user, setRole, ROLES] = useUser();
return (
<div style={{ height: '100%' }}>
Welcome { user }
<button onClick={() => setRole(ROLES.ADMIN)}>
Make Admin
</button>
</div>
);
};

23. 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];
};

25. How do we share data
between components?

26. Lift State Up

27. React Context

28. <App />
<User />
UsersProvider
Logged In Username
UsersConsumer

29. const App = () => (
<Provider>
<Provider1>
<Provider2>
<Provider3>
<Provider4>
<Provider5>
<Layout />
</Provider5>
</Provider4>
</Provider3>
</Provider2>
</Provider1>
</Provider>
);

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

31. When Context
Isn't enough
Where do we
go from here?

32. External State Managment

33. <App />
<Layout />
<Header /> <Accounts />
<User />
Store
Users Accounts
State Managment React Component Tree

34. Direct Subscriptions

35. Render Bailout

36. Moving from Context to State
Managment
Large refactor

37. What if it could be easier?

38. Developer, Consultant, Trainer
CEO @ 500Tech
I love dad jokes
Adam Klein

39. Thank You
Maayan Glikser Adam Klein
&
https://github.com/adamkleingit/reusable-talk
https://github.com/reusablejs/reusable
@maayanglikser
@adamklein500