This document discusses the evolution of component composition in React, from mixins to higher-order components. It describes how mixins were commonly used in early React but caused problems with name clashes and complexity. React then introduced classes but removed mixin support. Developers experimented with inheritance but it did not allow for pure composability. Later, higher-order components were introduced as a way to compose logic in a non-hierarchical manner by wrapping one component inside another. The document demonstrates how to build a controlled input component using higher-order components to separate concerns into model, view and controller logic in a modular, reusable way. It also discusses debugging techniques using the Recompact library which treats components as streams of props.

1. Greg Bergé, @neoziro
Recompacting your
React application

2. • From mixins to higher-order components
• Higher-order components
• Debugging & performances

3. From mixins to
higher-order components

4. React v0.3.0
First public release of React,
with mixins support.
29/03/2013
🗓

5. – from React documentation
“Sometimes very different components may
share some common functionality. These are
sometimes called cross-cutting concerns.”

6. React.createClass({
handleClick: function (event) {
event.preventDefault();
window.history.back();
}
render: function () {
return <a onClick={this.handleClick}>Back</a>;
}
});

7. I want to reuse the
back logic :)

8. Let’s create a mixin!

9. const BackMixin = {
handleClick: function (event) {
event.preventDefault();
window.history.back();
}
};
React.createClass({
mixins: [BackMixin],
render: function() {
return <a onClick={this.handleClick}>Back</a>;
}
});

10. Let’s put the rendering
logic inside!

11. const BackMixin = {
handleClick: function (event) {
event.preventDefault();
window.history.back();
}
renderBackButton: function () {
return <a onClick={this.handleClick}>Back</a>;
}
};
React.createClass({
mixins: [BackMixin],
render: function() {
return this.renderBackButton();
}
});

12. And now in real life…

13. React.createClass({
mixins: [BackMixin, RouterMixin],
handleClick: function (event) {
event.preventDefault();
this.transitionTo('home');
}
render: function() {
return (
<div>
<a onClick={this.handleClick}>Go home</a>
{this.renderBackButton()}
</div>
);
}
});

14. OK let’s refactor it.
😰

15. const BackMixin = {
handleBack: function (event) {
event.preventDefault();
window.history.back();
}
renderBackButton: function () {
return <a onClick={this.handleBack}>Back</a>;
}
};

16. A wild component
appears!
‼

17. React.createClass({
mixins: [BackMixin, PureRenderMixin, RouterMixin, ForwardMixin],
render: function() {
return (
<div>
<a onClick={this.handleClick}>Go back</a>
</div>
);
}
});
I forgot this one

18. Mixins
Name clashing
Hard refactoring
Complexity
😫

19. 10/03/2015
React v0.13.0
Support for using ES6 classes
to build React components.
🗓

20. class extends React.Component {
handleClick = (event) => {
event.preventDefault();
window.history.back();
};
render() {
return <a onClick={this.handleClick}>Back</a>;
}
}

21. No mixin support.

22. Let’s try inheritance!
💡

23. class BackComponent extends React.Component {
handleClick = (event) => {
event.preventDefault();
window.history.back();
};
}
class extends BackComponent {
render() {
return <a onClick={this.handleClick}>Back</a>;
}
}

24. I want it to be pure!

25. class BackComponent extends React.PureComponent {
handleClick = (event) => {
event.preventDefault();
window.history.back();
};
}
class extends BackComponent {
render() {
return <a onClick={this.handleClick}>Back</a>;
}
}

26. Not every time…

27. We don’t need a hierarchy,
we need a composability.
😰

28. React Blog post
Mixins Considered harmful
by Dan Abramov
13/07/2016
🗓

29. For the first time,
“higher-order components”
concept is mentioned on React
website.
😳

30. What is a
higher-order component?

31. Component => EnhancedComponent

32. Do you know Redux?

33. connect(state => state)(TodoApp)

34. Higher-order components
step by step

35. class extends Component {
state = { value: '' };
handleChange = ({ target: { value } }) =>
this.setState({ value });
render() {
return (
<input
onChange={this.handleChange}
value={this.state.value}
/>
)
}
}

37. class extends Component {
state = { value: '' };
handleChange = ({ target: { value } }) =>
this.setState({ value });
render() {
return (
<input
onChange={this.handleChange}
value={this.state.value}
/>
)
}
}
Model
Controller
View

38. 1. The View

39. const View = ({ onChange, value }) =>
<input onChange={onChange} value={value} />

41. const View = ({ onChange, value }) =>
<input onChange={onChange} value={value} />

42. const View = 'input'

43. 2. The Model

44. const Model = class extends Component {
state = { value: '' }
handleChange = value =>
this.setState({ value })
render() {
return (
<View
onChange={({ target: { value } }) =>
handleChange(value)}
value={this.state.value}
/>
)
}
}

45. ❌
My model is not
generic

46. const model = BaseComponent => class extends Component {
state = { value: '' }
handleChange = value => this.setState({ value })
render() {
return (
<BaseComponent
{...this.props}
onChange={this.handleChange}
value={this.state.value}
/>
)
}
}

47. More generic?

48. const withState = (stateName, handlerName, initialValue) =>
BaseComponent => class extends Component {
state = { [stateName]: initialValue }
handleChange = value => this.setState({ [stateName]: value })
render() {
return (
<BaseComponent
{...this.props}
{...{
[stateName]: this.state[stateName],
[handlerName]: this.handleChange,
}}
/>
)
}
}
const model = withState('value', 'onChange', '')

49. Recomp(act|ose)

50. const model = recompact.withState('value', 'onChange', ‘')

51. const model = recompact.withState('value', 'onChange', ‘')
const MyInput = model('input')

52. 😒

53. 2. The Controller

54. const controller = BaseComponent =>
class extends Component {
handleChange = ({ target: { value } }) =>
this.props.onChange(value);
render() {
return (
<BaseComponent
{...this.props}
onChange={handleChange}
/>
)
}
}

55. More generic?

56. const withHandlers = config =>
BaseComponent =>
class extends Component {
constructor(props) {
super(props)
this.handlers = {}
Object.keys(config).forEach((key) => {
this.handlers[key] = (...args) => config[key](this.props)(...args);
})
}
render() {
return (
<BaseComponent
{...this.props}
{...this.handlers}
/>
)
}
}
const controller = withHandlers({
onChange: ({ onChange }) => ({ target: { value }}) => onChange(value),
})

58. const controller = recompact.withHandlers({
onChange: ({ onChange }) => ({ target: { value }}) => onChange(value),
})

59. const MyInput = recompact.compose(
recompact.withState('value', 'onChange', ''),
recompact.withHandlers({
onChange: ({ onChange }) => ({ target: { value }}) => onChange(value),
}),
)('input')

60. class extends Component {
state = { value: '' };
handleChange = ({ target: { value } }) =>
this.setState({ value });
render() {
return (
<input
onChange={this.handleChange}
value={this.state.value}
/>
)
}
}

61. OK, you won 3 lines…

62. const MyBluePerfInput = recompact.compose(
// Performance
recompact.pure,
// Model
recompact.withState('value', 'onChange', ''),
// Controller
recompact.withHandlers({
onChange: ({ onChange }) => ({ target: { value } }) => onChange(value),
}),
// Style
recompact.withProps({ style: { color: ‘blue’ } }),
)('input')

64. Debugging &
performances

67. Recompose

69. isReferentiallyTransparentFunctionComponent

70. What is a referentially
transparent component?
• Function
• No default props
• No context

71. const MyBluePerfInput = recompact.compose(
// No transparent
recompact.pure,
// No transparent
recompact.withState('value', 'onChange', ''),
// No transparent
recompact.withHandlers({
onChange: ({ onChange }) => ({ target: { value } }) => onChange(value),
}),
// Transparent
recompact.withProps({ style: { color: ‘blue’ } }),
)('input')

72. Recompact

74. What are we really
doing?

75. We take some props and
return (or not) other props.

76. (next, props) => next(props)

77. subscribe, next…
it reminds me of something

78. props$ => props$

79. const mapProps = propsMapper =>
(next, props) => next(propsMapper(props))
const mapProps = propsMapper =>
props$ => props$.map(propsMapper)

80. Higher-order
components
Stream of props

81. Debugging is logging

82. export default recompact.compose(
recompact.withProps({ foo: 'bar' }),
recompact.debug(),
recompact.renameProp('foo', 'className'),
recompact.debug(),
)('input')

83. • Avoid mixins and inheritance
• Separate concerns using higher-order
components
• Create small higher-order components and
compose them

84. Thanks!