Render props vs State Hook

Ivan Velasquez
Oct 26, 2018 · 2 min read

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.

Let’s create a component example that will help us to show/hide elements.

import React from 'react';
import PropTypes from 'prop-types';
import { defaultTo } from 'lodash';
class VisibilityHelper extends React.Component {
constructor(props) {
super(props);
this.state = {
isDisplayed: defaultTo(props.initialState, false),
};
this.hide = this.hide.bind(this);
this.show = this.show.bind(this);
}
hide() {
this.setState({
isDisplayed: false,
});
}
show() {
this.setState({
isDisplayed: true,
});
}
render() {
return this.props.children({
...this.state,
hide: this.hide,
show: this.show,
});
}
}
VisibilityHelper.propTypes = {
initialState: PropTypes.bool,
children: PropTypes.func.isRequired,
};
export default VisibilityHelper;

How can I use this component?

import VisibilityHelper from '...somewhere-inside-your-app';function ButtonComponent() {
return (
<VisibilityHelper>
{
({
isDisplayed,
hide,
show
}) => (
<div>
{
isDisplayed &&
<p onClick={hide}>Click to hide</p>
}<button onClick={show}>Click to display</button>
</div>
)
}
</VisibilityHelper>
);
}

This ButtonComponent will render a simple button that once it is clicked, it will change the isDisplayed property internally used on VisibilityHelper and it will show the hidden content.

I found render props use full in this kind of situations where we have a stateless component and there is not need to write a whole class.

React Hooks

According to the documentation, “Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently in React v16.7.0-alpha and being discussed in an open RFC.”

import { useState } from 'react';

function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

As soon I started reading feature’s specification I knew exactly where to implement it on my react apps and I decided to write my first blog post on medium to share my knowledge

Replace render props with React Hooks.

Let’s rewrite the ConfirmationButton component replacing the VisibilityHelper with React Hooks.

import { useState } from 'react';function ConfirmationButton() {
const [isDisplayed, show] = useState(false);

return (
<div>
{
isDisplayed &&
<p onClick={() => show(false)}>Click to hide</p>
}
<button onClick={() => show(true)}>Click to display</button>
</div>
);
}

Conclusion

React Hooks is not a replacement for Render props, there are more things that you can do with them, but for this use case that I think hooks is a good feature to use states properties inside a stateless component.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store