The document discusses higher order components (HOCs) in React. It begins by introducing HOCs as functions that take a component and return a new component. Various examples of HOCs are provided, including for purposes like code splitting, server side rendering, data tracking, and component logging. Key tips are provided, such as avoiding HOCs inside render and that refs are not passed through. The document also discusses how render props can be used as an alternative pattern to HOCs in some cases, and provides examples of common use cases like async data fetching and geolocation. It concludes by explaining that HOCs can also be created using a render prop approach.

1. HigherOrder(Components)
render={props}

2. > whoami
Nitish Phanse
@nitish24p
Builds stuff @ KyePot

3. UI = f(Components)

4. Higher Order Functions

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

6. function multiply() {
}

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

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

9. throttle = (callback: Function, wait: number) => {
let time = Date.now();
return function() {
};
};

10. throttle = (callback: Function, wait: number) => {
let time = Date.now();
return function() {
if (time + wait - Date.now() < 0) {
callback.apply(this, arguments);
time = Date.now();
}
};
};

11. throttle = (callback: Function, wait: number) => {
let 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)} />

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

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

14. Higher Order Functions
A function which takes one or more
arguments and returns a functions
Component
A function which takes a component as an
argument and returns a new component

15. function myHigherOrderComponent(Component) {
}

16. function myHigherOrderComponent(Component) {
return class extends React.Component {
}
}

17. function myHigherOrderComponent(Component) {
return class extends React.Component {
render() {
return <Component />
}
}
}

18. function myHigherOrderComponent(Component) {
return class extends React.Component {
render() {
return <Component {...this.props}/>
}
}
}

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

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

21. Some real world use cases please

22. Code Splitting

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

24. function asyncComponent(importComponent: Function, LoadingComponent: Function) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
}
return AsyncComponent;
}

25. function asyncComponent(importComponent: Function, LoadingComponent: Function) {
class AsyncComponent extends Component {
constructor(props) {
super(props);
this.state = {
component: null
};
}
render() {
const C = this.state.component;
return C ? <C {...this.props} /> : <LoadingComponent />;
}
}
return AsyncComponent;
}

26. function asyncComponent(importComponent: Function, LoadingComponent: Function) {
class AsyncComponent extends Component {
constructor(props) {
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 />;
}
}
return AsyncComponent;
}

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

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

29. Server Side Rendering

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

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

32. const wrapComponentWithData = (WrappedComponent, InitialData) => {
return class CustomComponent extends React.Component {
render() {
return <WrappedComponent {...InitialData} {...this.props} />;
}
};
};
class App extends Component {
render() {
const data = { this.props }
return (
<div>
<Switch>
<Route exact path={'/'}
component={wrapComponentWithData(Homepage, data)} />
<Route exact path={'/products'}
component={wrapComponentWithData(Products, data)} />
</Switch>
</div>
);
}
}

33. Data Tracking

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

35. import TrackerLib from 'tracker.js'
const withTracking = (Component, pageName, eventObject) => {
return class CustomComponent extends React.Component {
render() {
return <Component {...this.props} />;
}
};
};

36. import TrackerLib from 'tracker.js'
const withTracking = (Component, pageName, eventObject) => {
return class CustomComponent extends React.Component {
componentDidMount() {
TrackerLib.event(pageName, ...eventObject)
}
render() {
return <Component {...this.props} />;
}
};
};

37. import TrackerLib from 'tracker.js'
const withTracking = (Component, pageName, eventObject) => {
return class CustomComponent extends React.Component {
componentDidMount() {
TrackerLib.event(pageName, ...eventObject)
}
render() {
return <Component {...this.props} />;
}
};
};
export default withTracking(HomePage, 'Home Page', {});

38. Component Logger

39. function componentLogger(WrappedComponent) {
return class extends React.Component {
render() {
return <WrappedComponent {...this.props} />;
}
}
}

40. function componentLogger(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
}

41. function componentLogger(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
}
export default componentLogger(HomePage);

42. Some Handy Tips

43. Some Handy Tips

44. Some Handy Tips
Avoid using HOCs inside the render method

45. Avoid using HOCs inside the render method
Some Handy Tips
render() {
const EnhancedComponent = enhance(MyComponent);
return <EnhancedComponent />;
}

46. Some Handy Tips
render() {
const EnhancedComponent = enhance(MyComponent);
return <EnhancedComponent />;
}
Avoid using HOCs inside the render method

47. Refs Aren’t Passed Through
Some Handy Tips

48. Refs Aren’t Passed Through
Some Handy Tips
function Field({ inputRef, ...rest }) {
return <input ref={inputRef} {...rest} />;
}

49. Refs Aren’t Passed Through
Some Handy Tips
function Field({ inputRef, ...rest }) {
return <input ref={inputRef} {...rest} />;
}
const EnhancedField = enhance(Field);
<EnhancedField
inputRef={(inputEl) => {
this.inputEl = inputEl
}}
/>

50. Refs Aren’t Passed Through
Some Handy Tips
function Field({ inputRef, ...rest }) {
return <input ref={inputRef} {...rest} />;
}
const EnhancedField = enhance(Field);
<EnhancedField
inputRef={(inputEl) => {
this.inputEl = inputEl
}}
/>
// Inside Your HOC
this.inputEl.focus();

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

52. Breathe

53. Breathe.

54. Breathe..

55. Breathe…

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

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

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

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

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

61. class Posts extends React.Component {
state = {
posts: getInitialPostData()
}
render() {
return (
<div>
{this.props.render(this.state)}
</div>
)
}
}

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

63. Can i use children ???
🤔

64. class Posts extends React.Component {
state = {
posts: getInitialPostData()
}
render() {
return (
<div>
{this.props.children(this.state)}
</div>
)
}
}

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

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

67. Where can i use a Render prop?

68. Async List Fetching

69. class List extends React.Component {
state = {
list: [],
isLoading: false,
};
componentDidMount() {
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,
});
}
}

70. class List extends React.Component {
state = {
list: [],
isLoading: false,
};
componentDidMount() {
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,
});
}
render() {
return this.props.render(this.state);
}
}

71. <List
url="https://api.github.com/users/nitish24p/repos"
render={
}/>

72. <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>
)} />

73. Geolocation

74. class Location extends Component {
}

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

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

77. <Location>
</Location>

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

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

80. Handy Tip

81. Handy Tip

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

83. 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}
/>

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

85. Can i create a HOC using a Render Prop

86. Can i create a HOC using a Render Prop

87. 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} />
)} />
)
}
...
}

88. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

89. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

90. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

91. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

92. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

93. function HigherOrderCompCounter(Component) {
return class extends React.Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render () {
return <Component counter={this.state.counter}
{...this.props}/>
}
}
}
const HOCCounter =
HigherOrderCompCounter(CounterComponent);
<HOCCounter />
class Counter extends Component {
state = {
counter: 0
}
componentDidMount() {
setInterval(() => {
this.setState((prevState) =>
({counter: prevState.counter + 1}));
}, 1000)
}
render() {
return this.props.children(this.state);
}
}
<Counter>
{({ counter }) => <h1>{counter}</h1>}
</Counter>
Higher order Component Render Prop
const CounterComponent = ({ counter }) =>
<h1>{counter}</h1>

94. Thank you