How to use Flow with React.createRef()?

Question

Since React 16.3 it is possible to use React.createRef() to access a DOM element. I am also using Flow in my project, but the documentation still uses the old way.

The below code unfortunately fails:

/* @flow */
import * as React from 'react';

export class TestComponent extends React.Component<{}> {
  myRef: React.Ref<HTMLDivElement>

  constructor(props: any) {
    super(props)
    this.myRef = React.createRef()
  }

  render() {
    return (
      <div ref={this.myRef} />
    )
  }
}

with the following error:

Cannot instantiate `Ref` because in type argument `ElementType`:
 - Either a callable signature is missing in `HTMLDivElement` [1] but exists in
   `React.StatelessFunctionalComponent` [2].
 - Or `HTMLDivElement` [1] is incompatible with statics of `React.Component` [3].

How do I type it correctly?

https://devdocs.io/flow/react/types#toc-react-ref – FDisk Jan 22 '19 at 11:55 — FDisk, Jan 22 '19 at 11:55

allienx · Accepted Answer · 2019-12-12T17:50:49.167

Looking at the flow type definition for React.createRef():

declare export function createRef<ElementType: React$ElementType>(
): {current: null | React$ElementRef<ElementType>};

I was able to do something like this:

/* @flow */
import * as React from 'react';

export class TestComponent extends React.Component<{}> {
  myRef: { current: null | HTMLDivElement }

  constructor(props: any) {
    super(props)
    this.myRef = React.createRef()
  }

  render() {
    return (
      <div ref={this.myRef} />
    )
  }
}

Tomasz Mularczyk · Answer 2 · 2018-04-28T12:00:51.413

2

There is a related github issue.

If it's not fixed yet you can type it yourself:

type RefObject = {|
  current: any,
|};

This is how it is typed internally in react library type definitions.

edited Apr 28 '18 at 12:00

answered Apr 28 '18 at 11:48

Tomasz Mularczyk

27,156
17
99
146

When trying to use the self defined RefObject I get the error `Cannot assign React.createRef() to this.myRef because inexact object type [1] is incompatible with exact RefObject [2].` Any idea? (I am quite new to flow). – Zardoz Apr 28 '18 at 12:07
@Zardoz try like this: `type RefObject = { current: any };` – Tomasz Mularczyk Apr 28 '18 at 12:14

score 1 · Answer 3 · answered May 08 '19 at 20:42

If you are using "class properties", you may createRef() in the following way:

// @flow
import * as React from 'react';

export class TestComponent extends React.Component<{}> {
  myRef = React.createRef<HTMLElement>();

  render() {
    return (
      <div ref={this.myRef} />
    )
  }
}

score 0 · Answer 4 · answered Aug 04 '20 at 08:18

In my case I was using formik reference

// @flow
import React from 'react';
import { Formik } from "formik"


export class TestComponent extends React.Component<Props> {
   formikRef = React.createRef<Formik>();

  render() {
     return (
         <Formik 
            ...,
            ref={this.formikRef}
         />
     )
  }
}

How to use Flow with React.createRef()?

4 Answers4