Introduction
HOC, Render-props, hook are different techniques to create reusable or composable logic in React.js.
Take a look at the use case where we have a button to toggle the visibility of some text:
import React, { Component } from 'react';
class App extends Component {
constructor() {
super()
this.state = {
isTextABCVisbible: true
}
}
togggleTextABC = () => {
this.setState((state) =>({
isTextABCVisbible: !state.isTextABCVisbible
}))
}
render() {
return (
<div className="App">
<button onClick={this.togggleTextABC}>Toggle Text ABC Visble</button>
{this.state.isTextABCVisbible && <h1>ABC</h1>}
</div>
);
}
}
export default App;
view rawApp.js hosted with ❤ by GitHub
But if i want to add more text like XYZ and i want another button that toggle the text XYZ, i will have to create visible state for button and the method for toggle its visibility
import React, { Component } from 'react';
class App extends Component {
constructor() {
super()
this.state = {
isTextABCVisbible: true,
isTextXYZVisible: true
}
}
togggleTextABC = () => {
this.setState((state) =>({
...state,
isTextABCVisbible: !state.isTextABCVisbible
}))
}
toggleTextXYZ = () => {
this.setState((state) =>({
...state,
isTextXYZVisible: !state.isTextXYZVisible
}))
}
render() {
return (
<div className="App">
<button onClick={this.togggleTextABC}>Toggle Text ABC Visble</button>
{this.state.isTextABCVisbible && <h1>ABC</h1>}
<button onClick={this.toggleTextXYZ}>Toggle Text ABC Visble</button>
{this.state.isTextXYZVisible && <h1>XYZ</h1>}
</div>
);
}
}
export default App;
view rawApp.js hosted with ❤ by GitHub
This work but it’s not DRY. We gonna refactor the code with some methods above that help us write code that doesn’t violate DRY principle.
Refactor the component with render props
The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a function. A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
import React, {Component} from 'react'
class Toggle extends Component {
constructor() {
super()
this.state = {
isToggle: false,
}
}
toggle = () => {
this.setState(state=>({isToggle:!state.isToggle}))
}
render () {
return this.props.children({ isToggle:this.state.isToggle, toggle:this.toggle })
}
}
export default Toggle
view rawtoggle.js hosted with ❤ by GitHub
What is repetitive methods and states is the state to store component is visibility and the method to toggle that state so we encapsulate it in the render props component and expose it through function render props. Child props is reserve props in react that present any child component nested in side its component.
import React, { Component } from 'react';
import Toggle from './Toggle'
class App extends Component {
render() {
return (
<>
<Toggle>
{({isToggle, toggle})=>(
<>
{isToggle && (<span>ABC</span>)}
<button onClick={toggle}>toggle</button>
</>
)}
</Toggle>
<Toggle>
{({isToggle, toggle})=>(
// Only here has access to render props's scope
<>
{isToggle && (<span>XYZ</span>)}
<button onClick={toggle}>toggle</button>
</>
)}
</Toggle>
</>
);
}
}
export default App;
view rawApp.js hosted with ❤ by GitHub
The cons of this approach is only component inside it’s scope which is its child component has access to its passed data to it’s child components
Refactor the component using HOC component
A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API,. The are a pattern that emerges from React’s compositional nature. Concretely, a higher-order component is a function that takes a component and returns a new component. Component return by HOC Component is freely to modified it’s params components by actions such as:
- Wrap it inside different component
- Pass props to it
- …etc
Let’s create HOC component that modify our main component by pass it’s state and.
import React, {Component} from 'react'
const withToggle = (C, field) => (
class C extends Component {
constructor () {
super()
const {field} = this.props
this.state = {
[field]: false
}
}
render () {
const {field} = this.props
const {Field} = this.state
const Cprops = {
[`is${field}Toggle`]: Field,
[`toggle${field}`]: () => {
this.setState(state=>({[field]:!state[field]}))
}
}
return <C {...Cprops} {...this.props}/>
}
}
)
export default withToggle
view rawwithToggle.js hosted with ❤ by GitHub
Component created by withToggle will have state {field} which is second parameter passes to withToggle function and method that will toggle field pass in our component.
import React, { Component } from 'react';
import Toggle from './Toggle'
import withToggle from './withToggle'
class App extends Component {
render() {
const {isAsdToggle, toggleAsd} = this.props
const {isDasToggle, toggleDas} = this.props
return (
<>
{isDasToggle && (<span>Das</span>)}
<button onClick={toggleDas}>toggle</button>
{isAsdToggle && (<span>Asd</span>)}
<button onClick={toggleAsd}>toggle</button>
<Toggle>
{({isToggle, toggle})=>(
<>
{isToggle && (<span>ABC</span>)}
<button onClick={toggle}>toggle</button>
</>
)}
</Toggle>
<Toggle>
{({isToggle, toggle})=>(
// Only here has access to render props's scope
<>
{isToggle && (<span>XYZ</span>)}
<button onClick={toggle}>toggle</button>
</>
)}
</Toggle>
</>
);
}
}
export default withToggle(withToggle( App, 'Asd' ), 'Das');
view rawApp.js hosted with ❤ by GitHub
High-order Component can also wrap other Hoc-order Component as well. The first component inject into our App component:
- state: isAsdToggle, isDasToggle
- method: toggleAsd, toggleDas
While the second inject into first high-order component
- state: isAsdToggle
- method: toggleAsd
Refactor the component using hook
Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class. You can read more about hook at https://reactjs.org/docs/hooks-intro.html
You can create a custom hook that implement toggle state via useState and the method to toggle that state then expose our component outside. But remember that, custom hook can only be used in functional react.js component.
import {useState} from 'react'
const useToggle = () => {
const [isToggle, setToggle] = useState(false)
const toggle = () => setToggle(!isToggle)
return [isToggle, toggle]
}
export default useToggle
view rawuseToggle.js hosted with ❤ by GitHub
useState is a primartive hook that allow to create state in non class component and hook. Its return An array: [state, state’s setter].
import React, { Component } from 'react';
import Toggle from './Toggle'
import withToggle from './withToggle'
import useToggle from './useToggle'
const App = (props) => {
const [isXzcToggle, toggleXzc] = useToggle()
const {isAsdToggle, toggleAsd} = props
const {isDasToggle, toggleDas} = props
return (
<>
{isXzcToggle && (<span>Xzc</span>)}
<button onClick={toggleXzc}>toggle Xzc</button>
{isDasToggle && (<span>Das</span>)}
<button onClick={toggleDas}>toggle Das</button>
{isAsdToggle && (<span>Asd</span>)}
<button onClick={toggleAsd}>toggle Asd</button>
<Toggle>
{({isToggle, toggle})=>(
<>
{isToggle && (<span>ABC</span>)}
<button onClick={toggle}>toggle Abc</button>
</>
)}
</Toggle>
<Toggle>
{({isToggle, toggle})=>(
// Only here has access to render props's scope
<>
{isToggle && (<span>XYZ</span>)}
<button onClick={toggle}>toggle Xyz</button>
</>
)}
</Toggle>
</>
)
}
export default withToggle(withToggle( App, 'Asd' ), 'Das');
view rawApp.js hosted with ❤ by GitHub
Conclusion
Although Hook is the best solution to reduce DRY in react.js application in mine opinion, HOC component and render props is still a viable choice in some specific or edge use case.
Source code repository: https://github.com/phmngocnghia/demo-hoc-render-props-hook
