Render Props in React, Frontend System Design

If you are a beginner in React, you might have heard of the term “render props” and wondered what it means and how to use it. In this article, I will explain the concept of render props, show you some examples of how they can be used, and discuss the benefits and drawbacks of this pattern.

What are render props?

Render props are 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.

The term “render prop” refers to a prop that is used to render some UI. It doesn’t have to be called render, although that is a common convention. You can name it anything you like, such as childrenor component.

How to use render props?

To use render props, you need to follow these steps:

1. Create a component that accepts a prop that is a function. This prop is usually called render, but you can name it anything you want. For example, children or component.
2. In the component, invoke the function prop with some arguments that are relevant to the component’s functionality or state. For example, data, loading, error, etc.
3. Return the result of invoking the function prop as part of the component’s JSX output.
4. In another component, use the first component and pass a function as the prop that renders some UI based on the arguments. You can use any JSX syntax you want inside the function, such as elements, components, hooks, etc.

Example

Suppose you want to create a component that displays the current time and updates it every second. You can use render props to pass a function that renders the time in different formats, such as 12-hour or 24-hour.

First, you create a Clockcomponent that accepts a render prop. The render prop is a function that accepts one argument: time. The Clock component uses the useStateand useEffecthooks to store and update the current time every second. It then invokes the render prop with the time and returns its result.

import React, { useState, useEffect } from "react";

function Clock({ render }) {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return render(time);
}

Use the Clock componennt and pass a function that renders the time in 12-hour format. You can use the toLocaleTimeStringmethod to format the time according to your locale.

function App() {
  return (
    <div className="App">
      <h1>Render Props Example</h1>
      <Clock
        render={(time) => {
          return <p>The current time is {time.toLocaleTimeString("en-US")}</p>;
        }}
      />
    </div>
  );
}

Result

Why use render props?

Render props are useful for sharing code between components without having to create a higher-order component (HOC) or use inheritance. HOCs are functions that take a component and return a new component with some additional functionality. Inheritance is when a component extends another component and inherits its behavior.

Render props uses composition instead of wrapping or extending components. Composition is when a component uses another component as part of its output. Render props allow us to compose components dynamically by passing functions as props.

When to use render props?

Render props are best suited for scenarios where you need to share some state or behavior between components, but you don’t want to create a separate component for each use case.

For example, You can create a component that fetches data from an API and passes it to the render prop function. This way, you can reuse the same data fetching logic for different components that need the same data.

What are the drawbacks of render props?

• Performance: Render props can cause unnecessary re-rendering of components if the function passed as a prop changes on every render. To avoid this, you can use memoization techniques such as React.memo or useCallback hooks.

• Readability: Render props can make the code harder to read and understand if the function passed as a prop is too long or complex. To avoid this, you can extract the function into a separate variable or component.

Conclusion

Render props are a powerful technique for sharing code between React components using a prop whose value is a function. They allow us to reuse stateful logic without having to create higher-order components or use inheritance. However, they also have some drawbacks that we need to be aware of and avoid. Render props are best suited for scenarios where we need to share some state or behavior between components, but we don’t want to create a separate component for each use case