React Render Props

When you are building your pet React project, sometimes you may want to reuse a component across other components to follow the DRY principle. This is where the render props pattern may shine.

According to the React documentation, render props is "a technique for sharing code between React components using a prop whose value is a function."

Let's use an example to break down this definition. We have a simple React application that will display two sassy comments depending on the random number that is provided to it. If the random number is greater than zero, then display "Whoa, Big Guy!". If random number is less than or equal to zero, then display "Nah, less than one, Nice Try!".

function App() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}


function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

If you want to play along, you can access the code in codepen.

Here we see that we have one component <App /> that contains a child component <RandomNumber />.

The child component <RandomNumber /> will manage the state of the random number, but it will not care whether <App /> is rendering the display of it or another parent component.

The parent component <App /> will manage the display of the random number and the corresponding message. It will however not maintain the state of the random number.

Now, what if we have to share the <RandomNumber /> component across three parent components? Let's see what it looks like below.

function App() {
    return (
      <>
        <ParentOne />
        <ParentTwo />
        <ParentThree />
      </>
    )
}

function ParentOne() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentTwo() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function ParentThree() {
    return (
        <div>
            <RandomNumber render={
                function(number) {
                    return (
                        <h1>{number > 0 ? "Whoa, Big Guy!" : "Nah, less than one, Nice Try!"}</h1>
                    )
                }
            }/>
        </div>
    )
}

function RandomNumber(props) { 
    const max = Math.random()
    const min = Math.random()
    const number = max - min
    return (
        <div>
            {props.render(number)}
        </div>
    )
}

ReactDOM.render(<App />,document.getElementById('root'))

If you want to play along, you can access the code in codepen.

This is essentially the same code as the first one above. However, now we have three parents. Notice <RandomNumber /> child component did not have to change to accommodate each parent. It simply maintains a random number for each parent component. Each parent component, in turn, manages the rendering of the JSX separately and independent of each other.

Caveat: This is my personal notes on learning React. If you see any mistakes, would appreciate pointing it out. Thank you!

Date Created: December 16, 2021