React Tips — Render Props and Forward Refs
Tags: react, webdev, programming, javascript
Published: 2021-01-23 19:52:49

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


React is the most used front end library for building modern, interactive front end web apps. It can also be used to build mobile apps.

In this article, we’ll look at how to use render props to create a component that renders things flexibly and passing refs to a child with forwarding refs.

### Render Props

Render prop is a pattern where we pass in the `render` function as a prop. To use the pattern, we create a component that calls the `render` function from props. Then from another component, we pass in the `render` prop with the function as the value to the component which calls `render` .

For instance, we can write the following code:

```
import React from "react";

const RenderComponent = ({ render }) => {
  const [foo] = React.useState("foo");
  const [bar] = React.useState("bar");

  return render({
    foo,
    bar
  });
};

export default function App() {
  return (
    <>
      <RenderComponent
        render={({ foo, bar }) => (
          <p>
            {foo} {bar}
          </p>
        )}
      />
      <RenderComponent
        render={({ foo, bar }) => (
          <p style={{ color: "green" }}>
            {foo} {bar}
          </p>
        )}
      />
    </>
  );
}
```

In the code above, we have the `RenderComponent` , which calls the `render` function passed in from props. It just calls the `render` function that's passed in from props with the states inside `RenderComponent `.

Then in `App` , we referenced `RenderComponent` twice, with the `render` prop set the different functions for each.

Therefore, we should see ‘foo bar’ displayed twice, with the 2nd one being green.

This is useful for formatting data differently from the same state without repeating code.

### Forward Refs

Forwarding refs means that we are getting the refs from a child component from a parent component.

For instance, if we want to get the ref of a button that resides in a custom button component, we can write the following code:

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

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref}>{props.children}</button>
));

export default function App() {
  const buttonRef = React.createRef();

  useEffect(() => {
    buttonRef.current.focus();
  }, []);

  return (
    <>
      <FancyButton ref={buttonRef}>Click me!</FancyButton>;
    </>
  );
}
```

In the code above, we have the `FancyButton` component, which has the `button` element, which we want to access. To let us access it from `App` or another component, we call `React.forwardRef` , which takes a callback with 2 parameters, `props` and `ref` .

The `props` have the props, and the `ref` is the ref that we can access from the outside. We set the `ref` prop to the `ref` parameter so to set the ref to the button.

Then in `App` , we create the `buttonRef` and pass it into `ref` . Then in the `useEffect` callback, we call `buttonRef.current.focus();` to focus the button when `App` load since we have an empty array as the 2nd argument.

Forwarding refs are also used with 3rd party components. For instance, if we have to use the `react-hook-form` package and we’re using our own custom input control components, then we have to call `forwardRef` as follows:

```
import React from "react";
import { useForm } from "react-hook-form";

const Select = React.forwardRef(({ label }, ref) => (
  <>
    <label>{label}</label>
    <select name={label} ref={ref}>
      <option value="10">10</option>
      <option value="20">20</option>
    </select>
  </>
));

export default function App() {
  const { register, handleSubmit } = useForm();

  const onSubmit = () => {};

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Select label="Age" ref={register} />
        <input type="submit" />
      </form>
    </>
  );
}
```

In the code above, we created a custom select control called `Select` , which is created by calling `forwardRef` with a callback that takes the `ref` as the 2nd parameter, we set it as the value of the `ref` prop in the select element.

Then we can access the ref of select from `App` .

### Conclusion

Render props is the pattern where we pass in the `render` function as a prop into a child component. The child component has the states that are rendered by the function we passed into the `render` prop.

Then we can reference that child component multiple times with different `render` functions.

Forwarding refs let us access the ref of an element from a child component from within the parent. This is useful for custom components that are used for customizing an existing HTML element.