Enhance react app with patterns - part 1: higher order component

Enhance React app with patterns
part 1: Higher Order Component
Jay Chung (xJkit)

https://github.com/xJkit

https://github.com/xJkit
Sr. Front End Developer
About Me
https://linkedin.com/in/xjkit54780
https://slideshare.net/JOEYCHUNG2
https://twitter.com/xJkit
Jay Chung

Higher Order Functions
• Takes one or more functions as arguments
• Returns a function as its result

Higher Order Functions
multThree :: (Num a) => a -> a -> a -> a
multThree x y z = x * y * z
ghci> max 4 5
5
ghci> (max 4) 5
5

Props
DOM
Component
State
ComponentProps
DOM
Stateful / Class Component
Stateless / Functional Component

Class Component
Props
DOM
Component
State

Props
State
class App extends Component {
handleFunction() {…}

Props
render() {
const { a, b, c } = functionA(9,4,8,7);
let d;
switch (a) {
case BLUE:
….
d = functionB(5);
break;
case RED:
….
d = functionC(6);
break;
default:
d = “default value”;
break;
}
// ….otherHeavyCompute(9,4,8,7)

Props
render() {
…
…
…
return (
}
<div>
{this.props.isLoading
?
<Loading />
: (
<A>
<B
a={(value) => handleA(value)}
a={(value) => handleB(value)}
a={(value) => handleC(value)}
/>
<C />
</A>
)
}
</div>

State
render() {
return <div />
}
State
render() {
return <div />
}
State
render() {
return <div />
}

Codes without mindset is a
MESS

I’m missing the declarative HTML…

React Advanced Patterns
Higher Order Component
Render Props
(Part 1)
(Part 2)

• Takes one or more components as arguments
• Returns a component as its result

const BaseComponent = props => {...}
let EnhancedComponent = pure(BaseComponent)
EnhancedComponent = mapProps(/*...args*/)(EnhancedComponent)
EnhancedComponent = withState(/*...args*/)(EnhancedComponent)
const composedHoc = BaseComponent => hoc1(hoc2(hoc3(BaseComponent)))
or you can compose them:

const App = React.createClass({
render() {
// Instead of maintaining our own state,
// we get the mouse position as a prop!
const { x, y } = this.props.mouse
return (
<div style={{ height: '100%' }}>
<h1>The mouse position is ({x}, {y})</h1>
</div>
)
}
})
const withMouse = (Component) => {
return class extends React.Component {
state = { x: 0, y: 0 }
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
<div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
<Component {...this.props} mouse={this.state}/>
</div>
)
}
}
}
App.js withMouse.js
Enhance you

• Code reuse, logic and bootstrap abstraction

• Render Highjacking

• State abstraction and manipulation

• Props manipulation

const AppWithMouse = withMouse(App)

A React utility belt for function components and higher-order components.
Recompose
Think of it like lodash for React.

Recompose
• …lift state into functional wrappers

• ...perform the most common React patterns

• ...optimize rendering performance

• ...interoperate with other libraries

Recompose
• Separate logics to the HoCs (enhancers)

• Make base component to be pure (if no defaultProps)

• Make base component more readable

• Make base component easier to test

HoCs 的使⽤用場景
• Lift States Up

• Common Tasks

• Performance Optimizations

• Observables

Lift States Up
• withProps

• withState

• withHandlers

• withStateHandlers

Common Tasks
• branch

• renderComponent

• renderNothing

• lifecycle

Demo
https://codesandbox.io/embed/1rkopmpl67
https://github.com/xJkit/trendmicro-fed-talk-pattern-hoc.git

Functional Components
are easier to test
• Enhancers + Base Component

• Only focus on props change

• https://github.com/xJkit/react-goodbye

• A save reminder component for react router v4.
Example: React GoodBye
import { BrowserRouter } from 'react-router-dom';
import { withGoodBye } from 'react-goodbye';
const EnhancedRouter = withGoodBye(BrowserRouter);
ReactDOM.render(
<EnhancedRouter>
<App />
</EnhancedRouter>,
document.getElementById('root')
);
enhancer

• https://github.com/xJkit/react-goodbye

• A save reminder component for react router v4.
describe('withGoodBye', () => {
const BaseComponent = () => <div />;
const EnhancedComponent = withGoodBye(BaseComponent);
test('should receive own props from EnhancedComponent to BaseComponent', () => {
const myProps = { foo: 1, bar: 2 };
const wrapper = shallow(<EnhancedComponent {...myProps}/>);
expect(wrapper.dive().find(BaseComponent).props().foo).toEqual(1);
expect(wrapper.dive().find(BaseComponent).props().bar).toEqual(2);
})
Example: React GoodBye

Ref in HoCs
• If you add a ref to a HOC, the ref will refer to the
outermost container component, not the wrapped
component.

• That’s because ref is not a prop. Like key, it’s handled
diﬀerently by React.

Ref in HoCs
• Rename ref prop -> innerRef, otherRef, … whatever

• React v16.3 comes to the rescue: forwardRef

babel-plugin-lodash
import compose from ‘recompose/compose’

import withState from ‘recompose/withState’
import { compose, withState } from ‘recompose’
==== equals to ====

Enhance react app with patterns - part 1: higher order component

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Enhance react app with patterns - part 1: higher order component

Similar to Enhance react app with patterns - part 1: higher order component (20)

Recently uploaded

Recently uploaded (20)

Enhance react app with patterns - part 1: higher order component