Higher Order Components and Render Props

HigherOrder(Components)
render={props}

> whoami
Nitish Phanse
@nitish24p
Builds stuff @ KyePot

Higher Order Functions
A function which takes one or more
arguments and returns a functions

function multiply(firstNumber) {
return function(secondNumber) {
return firstNumber * secondNumber
}
}
multiply(3)(4)

throttle = (callback: Function, wait: number) => {
};

let time = Date.now();
return function() {
};
};

return function() {
if (time + wait - Date.now() < 0) {
callback.apply(this, arguments);
time = Date.now();
}
};
};

return function() {
if (time + wait - Date.now() < 0) {
callback.apply(this, arguments);
time = Date.now();
}
};
};
<Input onChange={this.throttle(this.handleInputChange, 500)} />

Component

Component
A function which takes a component as an
argument and returns a new component

function myHigherOrderComponent(Component) {
}

return class extends React.Component {
}
}

render() {
return <Component />
}
}
}

render() {
return <Component {...this.props}/>
}
}
}

render() {
return <Component {...this.props}/>
}
}
}
export default myHigherOrderComponent(App); 
<EnhancedApp foo={bar}/>

Alternative to Mixins Pattern
Encapsulates Logic that can be shared easily
Access data from any part of the component life cycle

Some real world use cases please

function asyncComponent(importComponent: Function, LoadingComponent: Function) {
class AsyncComponent extends Component {
}
return AsyncComponent;
}

constructor(props) {
super(props);
this.state = {
component: null
};
}
}
}

super(props);
this.state = {
component: null
};
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : <LoadingComponent />;
}
}
}

super(props);
this.state = {
component: null
};
}
async componentDidMount() {
const { default: component } = await importComponent();
this.setState({
component: component
});
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : <LoadingComponent />;
}
}
}

class App extends Component {
render() {
<div>
<Switch>
</Switch>
</div>
}
}

const Products = asyncComponent(() => import('./pages/Products'), LoaderComponent);
const HomePage = asyncComponent(() => import('./pages/HomePage'), LoaderComponent);
render() {
<div>
<Switch>
<Route exact path={'/'} component={HomePage} />
<Route exact path={'/products'} component={Products} />
</Switch>
</div>
}
}

const wrapComponentWithData = (WrappedComponent) => {
return class CustomComponent extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
};
};

const wrapComponentWithData = (WrappedComponent, InitialData) => {
render() {
return <WrappedComponent {...InitialData} {...this.props} />;
}
};
};

import TrackerLib from 'tracker.js'
const withTracking = (Component, pageName, eventObject) => {
};

render() {
return <Component {...this.props} />;
}
};
};

componentDidMount() {
TrackerLib.event(pageName, ...eventObject)
}
render() {
}
};
};

TrackerLib.event(pageName, ...eventObject)
}
render() {
}
};
};
export default withTracking(HomePage, 'Home Page', {});

function componentLogger(WrappedComponent) {
render() {
}
}
}

componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
}
}
}

componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
}
}
}
export default componentLogger(HomePage);

Some Handy Tips
Avoid using HOCs inside the render method

Some Handy Tips
render() {
const EnhancedComponent = enhance(MyComponent);
return <EnhancedComponent />;
}

Refs Aren’t Passed Through
Some Handy Tips

Some Handy Tips
function Field({ inputRef, ...rest }) {
return <input ref={inputRef} {...rest} />;
}

Some Handy Tips
}
const EnhancedField = enhance(Field);
<EnhancedField
inputRef={(inputEl) => {
this.inputEl = inputEl
}}
/>

Some Handy Tips
}
const EnhancedField = enhance(Field);
<EnhancedField
inputRef={(inputEl) => {
this.inputEl = inputEl
}}
/>
// Inside Your HOC
this.inputEl.focus();

Common examples of HOC
connect of Redux
createContainer of Relay
Downshift
UrQl

Props
A prop is an object for passing data to a
component

Render Prop
A render prop is a function prop that a
component uses to know what to render

class Posts extends React.Component {
state = {
posts: getInitialPostData()
}
render() {
return (
<div>
{this.state.posts.map(post =>
<Post post={post} key={post.id}/>)}
</div>
)
}
}

state = {
}
render() {
return (
<div>
{this.state.posts.map(post =>
<Post post={post} key={post.id}/>)}
</div>
)
}
}
<Posts />

state = {
}
render() {
return (
<div>
{this.props.render(this.state)}
</div>
)
}
}

state = {
}
render() {
return (
<div>
{this.props.render(this.state)}
</div>
)
}
}
<Posts
render={({ posts }) =>
posts.map(post => <Post post={post} />)}
/>

state = {
}
render() {
return (
<div>
{this.props.children(this.state)}
</div>
)
}
}

state = {
}
render() {
return (
<div>
{this.props.children(this.state)}
</div>
)
}
}
<Posts>
{
({ posts }) =>
posts.map(post => <Post post={post} />)
}
</Posts>

Fully declarative approach using props
No props naming collision
Eases reusability of components

Where can i use a Render prop?

class List extends React.Component {
state = {
list: [],
isLoading: false,
};
this.setState({ isLoading: true }, this.fetchData);
}
fetchData = async () => {
const res = await fetch(this.props.url);
const json = await res.json();
this.setState({
list: json,
isLoading: false,
});
}
}

class List extends React.Component {
state = {
list: [],
isLoading: false,
};
this.setState({ isLoading: true }, this.fetchData);
}
fetchData = async () => {
const res = await fetch(this.props.url);
this.setState({
list: json,
isLoading: false,
});
}
render() {
return this.props.render(this.state);
}
}

<List
url="https://api.github.com/users/nitish24p/repos"
render={({ list, isLoading }) => (
<div>
<h2>My repos</h2>
{isLoading && <h2>Loading...</h2>}
<ul>
{list.length > 0 && list.map(repo => (
<li key={repo.id}>
{repo.full_name}
</li>
))}
</ul>
</div>
)} />

class Location extends Component {
}

state = {
latitude: undefined,
longititude: undefined
}
fetchGeoLocation = async () => {
const res = await fetch("api/url");
this.setState({
latitude: json.lat,
longitude: json.long,
});
}
}

state = {
latitude: undefined,
longititude: undefined
}
fetchGeoLocation = async () => {
const res = await fetch("api/url");
this.setState({
latitude: json.lat,
longitude: json.long,
});
}
render() {
const { latitude, longitude } = this.state;
return this.props.children({
latitude,
longitude,
fetchLocation: this.fetchGeoLocation
});
}
}

<Location>
{({ latitude, longitude, fetchLocation }) => {
}}
</Location>

<Location>
{({ latitude, longitude, fetchLocation }) => {
if (latitude && longitude) {
return <Map marker={latitude, longitude}/>
}
return <Button label='Get Location'
onClick={fetchLocation}/>
}}
</Location>

Be careful when using Render Props with
React.PureComponent
Handy Tip

Be careful when using Render Props with
React.PureComponent
Use function reference instead of arrow fn
Handy Tip
this.renderPosts = ({ posts }) => {
return posts.map(post => <Post post={post} />
}
<Posts
render={this.renderPosts}
/>

Common examples of render props
withRouter of React Router
Motion of React Motion
Downshift
UrQl

Can i create a HOC using a Render Prop

Can i create a HOC using a Render Prop
const withRouter = (Component) => {
const C = (props) => {
const { wrappedComponentRef, ...remainingProps } = props
return (
<Route render={routeComponentProps => (
<Component {...remainingProps}
{...routeComponentProps} ref={wrappedComponentRef} />
)} />
)
}
...
}

Higher Order Components and Render Props

More Related Content

What's hot (20)

Similar to Higher Order Components and Render Props (20)

Recently uploaded (20)

Higher Order Components and Render Props