One of the issues all front-end developers face is how to make UI components reusable. How do we craft components in such a way that satisfies the narrow use case that is clear to us now, while also making them reusable enough to work in a variety of circumstances?
Let’s say we are building an autocomplete component:
Take a look at the initial React component code:
https://medium.com/media/680362e8187c03d2477406e8eac49aa1/href
In this component, we have some logic that controls the core search behavior, but we also specify how the input and search results will be rendered. In this instance, we render a div that serves as a dropdown container and an unordered list containing a list item for each result within it.
Think about how you would reuse this component. Sure, you could use this very same component if you want to reproduce exactly the same behavioral and visual result. But what if you want to reuse the same behavior, but visualize the component slightly differently? What if you want to reuse the core search behavior but add a few modifications for a slightly different use case?
Imagine that instead of a dropdown containing the search results, you want a tag-like list of search results that always display:
At their core, the functionality of these two components is very similar: type into an input to filter a list.
This is a perfect use case for some relatively new tools that modern JavaScript frameworks now provide. These are render props in React and scoped slots in Vue. They work very similarly and provide a way to separate the behavior of a component from its presentation.
Render props in React
First, let’s look at how we would restructure our autocomplete component using render props in React. We will now have two components — one for our Autocomplete component and one for a core SearchSelect component.
Let’s look at the SearchSelect component first:
https://medium.com/media/1c4d06376a44b1c0b86514f3c45f0528/href
This is a renderless component (one that doesn’t render any markup of its own). Rather, it returns the result of a special prop called a render prop. This render prop accepts an object, into which you can pass any data that you would like the parent component to have access to.
Think of this as the opposite of normal props. Usually, props are passed down from parent to child. In the case of render props, these are returned from the child so the parent can access them.
Our SearchSelect component is handling the lowest level functionality — filtering a list of options based on a query string. It is then using the special render prop to render an element.
In the parent, we pass a function to the render prop of the SearchSelect component. This function returns a React element, which we can hydrate with state and behavior from the SearchSelect component itself. Basically, this means we are able to access data from the child component in the parent.
https://medium.com/media/30330a7c6ff4bd97ec85bbf37d83b5eb/href
The key to making this work is the arguments we pass to the render prop function. See how we are destructuring a single object and using those destructured properties inside our markup? This object should be passed as an argument when you call this.props.render() in the child component.
All this means that we can write whatever markup we want, as long as we properly hydrate it with the data and behavior exposed by the SearchSelect component.
Also, note how we are passing the method for filtering our list in as a prop. This will allow us to change the way our list of options is filtered, while still using the SearchSelect component.
Let’s look at how we would implement our tag-like list component. We use the same SearchSelect core component and just change the markup rendered by the render prop:
https://medium.com/media/d904b3f1befe858a83d50c77f74c22d2/href
Check out the working example:
https://medium.com/media/a2aef8f38deddc2fb66113218eb3aed7/href
Scoped slots in Vue
Now let’s look at how we would implement this in Vue using scoped slots. First, here’s our SearchSelect component (for this example I am using globally registered components but you should probably use single file components in a real project):
https://medium.com/media/bec185b8e045eeee1a93d3b5de71c5d0/href
As you can see, this looks very similar to the render prop in our React component. Here, we are returning a default scoped slot, which passes along an object with whatever we want. Here, we give it the results and our search method.
In our Autocomplete component, we use the slot-scope attribute to get access to the data from the child component. We can destructure the properties that come through for easier access, in much the same way as in our React render prop argument:
https://medium.com/media/3ea8235036674cd748a6b0a42b94170c/href
Check out the working example:
https://medium.com/media/0857cf6f6e04ecd7474aa4ae3bca497c/href
Other uses for render props & scoped slots
Creating reusable interface components isn’t the only use for render props and scoped slots. Here are some other ideas for how you can use them to encapsulate reusable behavior in a component that can then be exposed to its parent.
Data provider components
You can use render props/scoped slots to create a component that handles asynchronously fetching data and exposing that data to its parent. This allows you to hide the logic for hitting an endpoint, getting the result and handling possible errors, as well as displaying a loading state to users while the data fetch is in progress.
Here’s what the base component could look like:
https://medium.com/media/07e6800392836f1eb45a9334b8281252/href
It accepts a URL as a prop and handles the actual fetching logic. Then, we use it in a parent component:
https://medium.com/media/6085caf2eb8fb05eb62e9cd522cf94e9/href
Observers (resize, intersection, etc.)
You can also use render props/scoped slots to create a component that acts as a wrapper around resize or intersection observers. This component can simply expose the current size or intersection point of an element to a parent component. You can then perform whatever logic you need based on that data in the parent, preserving a nice separation of concerns.
Here is a base component that observes its own size and exposes its height and width to its parent:
https://medium.com/media/d0ce776a7ba80d718ad4035651cd6ec8/href
We are using the Element Resize Detector library to listen to changes in our element size, and a React ref to get a reference to the actual DOM node.
We can then use this component quite easily in our app:
https://medium.com/media/a4b31bd49f3cdaac44e1f4ae5fba0977/href
Conclusion
The key to successfully creating reusable components using both render props and scoped slots is being able to correctly separate behavior from presentation. Each time you create a new UI component, think “What is the core behavior of this component? Can I use this anywhere else?”
Having a core set of renderless components that use render props or scoped slots can help you cut down on code duplication in your app and think more carefully about your core interface behaviors.
Plug: LogRocket, a DVR for web apps
LogRocket is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.
In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single page apps.
Top comments (0)