Ref forwarding with React function components and Typescript
Tags: react, typescript, beginners, webdev
Published: 2021-03-29 15:07:15

---
title: Ref forwarding with React function components and Typescript
published: true
description: How to type React function component when using  Ref forwarding and Typescript
tags: react, typescript, beginners, webdev
canonical_url: https://jexperton.dev/en/blog/how-to-type-ref-forwarding-in-react-function-component/
cover_image: https://cdn.gaudi.sh/devto/bored.jpg
---
While ref forwarding is well explained in the official documentation, it can be confusing to type it correctly with function components.


### 1. Typing the reference to be forwarded

The reference is created with the [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) function. 

Unlike the [`useRef`](https://reactjs.org/docs/hooks-reference.html#useref) hook, which creates a `MutableRefObject` whose `.current` property might be initialized with an `undefined` value, [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) returns an [immutable](https://github.com/facebook/react/blob/master/packages/react/src/ReactCreateRef.js#L17) `RefObject` so you don't need to bother with the initial value type being different than the final value type.

```tsx
const refTitle: React.RefObject<Text> = React.createRef<Text>();
// In real life, you don't need to explicitly type refTitle 
```

In this example the reference will point to a `Text` component therefore the `Text` component is passed to [`createRef`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) as a [type argument](https://www.typescriptlang.org/docs/handbook/2/generics.html#working-with-generic-type-variables) to explicitly [type](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/v16/index.d.ts#L792) the referenced value.

### 2. Forwarding the reference to the child component

With the [ref attribute](https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components) of the child component:

```tsx
const ParentComponent: React.FC = () => {
  const refTitle = React.createRef<Text>();
  return (
    <ChildComponent ref={refTitle} title="Hello, World!" />
  );
}
```

### 3. Assigning the forwarded ref inside the child component

As said in the documentation:

> By default, *you may not use the ref attribute on function components* because they don’t have instances.

> If you want to allow people to take a `ref` to your function component, you can use [`forwardRef`](https://reactjs.org/docs/forwarding-refs.html)

Then with the [`forwardRef`]
(https://reactjs.org/docs/forwarding-refs.html) function:

```tsx
interface ChildComponentProps { 
  title: string; 
}

const ChildComponent = React.forwardRef<Text, ChildComponentProps>(
  (
    { title }: ChildComponentProps,
    ref: React.ForwardedRef<Text>,
  ): JSX.Element => {
    return (
      <Text ref={ref}>{title}</Text>
    );
  },
);

// Name the component for debugging purpose and prevent eslint warning.
ChildComponent.displayName = 'ChildComponent';
```

Now there's an immutable [`RefObject`](https://reactjs.org/docs/refs-and-the-dom.html#creating-refs) available in the `ParentComponent` that points to the `Text` component inside the `ChildComponent`.

### Concrete example

Here is an example with React Native where you can use ref forwarding to focus the device's screen reader on a text once the whole parent component is ready:

{% gist https://gist.github.com/jexperton/e50ccc04a2a786f010e401fb86164590 %}

<sub>Photo by <a href="https://unsplash.com/@jcgellidon">JC Gellidon</a> on <a href="https://unsplash.com">Unsplash</a></sub>