ref functions

How to use Flow's typed React ref functions

React allows you to grab the instance of an element or component with ref functions. To use a ref function add a maybe instance type to your class and assign your instance to that property in your ref function.

1
2
3
4
5
6
7
8
9
10
 
import * as React from 'react';

class MyComponent extends React.Component<{}> {
  // The `?` here is important because you may not always have the instance.
  button: ?HTMLButtonElement;

  render() {
    return <button ref={button => (this.button = button)}>Toggle</button>;
  }
}

The ? in ?HTMLButtonElement is important. In the example above the first argument to ref will be HTMLButtonElement | null as React will call your ref callback with null when the component unmounts. Also, the button property on MyComponent will not be set until React has finished rendering. Until then your button ref will be undefined. Protect yourself against these cases and use a ? (like in ?HTMLButtonElement) to protect yourself from bugs.

← Event Handling Children →

Was this guide helpful? Let us know by sending a message to @flowtype.