Recompacting your react application

Greg Bergé, @neoziro
Recompacting your
React application

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

From mixins to
higher-order components

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

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

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

I want to reuse the
back logic :)

const BackMixin = {
}
};
React.createClass({
mixins: [BackMixin],
render: function() {
}
});

Let’s put the rendering
logic inside!

const BackMixin = {
}
renderBackButton: function () {
}
};
React.createClass({
mixins: [BackMixin],
return this.renderBackButton();
}
});

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

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

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

Mixins
Name clashing
Hard refactoring
Complexity
😫

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

class extends React.Component {
handleClick = (event) => {
};
render() {
}
}

class BackComponent extends React.Component {
};
}
class extends BackComponent {
render() {
}
}

class BackComponent extends React.PureComponent {
};
}
class extends BackComponent {
render() {
}
}

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

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

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

What is a
higher-order component?

Component => EnhancedComponent

connect(state => state)(TodoApp)

Higher-order components
step by step

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

state = { value: '' };
this.setState({ value });
render() {
return (
<input
/>
)
}
}
Model
Controller
View

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

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

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

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', '')

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

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

const controller = BaseComponent =>
this.props.onChange(value);
render() {
return (
<BaseComponent
{...this.props}
onChange={handleChange}
/>
)
}
}

const withHandlers = config =>
BaseComponent =>
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),
})

const controller = recompact.withHandlers({
})

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

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

isReferentiallyTransparentFunctionComponent

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

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

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

subscribe, next…
it reminds me of something

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

Higher-order
components
Stream of props

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

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

Recompacting your react application

More Related Content

What's hot

Viewers also liked

Similar to Recompacting your react application

Recently uploaded

Recompacting your react application