Interface RefAttributes<T>

The props any component accepting refs can receive. Class components, built-in browser components (e.g. div) and forwardRef components can receive refs and automatically accept these props.

const Component = forwardRef(() => <div />);
<Component ref={(current) => console.log(current)} />

You only need this type if you manually author the types of props that need to be compatible with legacy refs.

interface Props extends React.RefAttributes<HTMLDivElement> {}
declare const Component: React.FunctionComponent<Props>;

Otherwise it's simpler to directly use Ref since you can safely use the props type to describe to props that a consumer can pass to the component as well as describing the props the implementation of a component "sees". RefAttributes is generally not safe to describe both consumer and seen props.

interface Props extends {
  ref?: React.Ref<HTMLDivElement> | undefined;
}
declare const Component: React.FunctionComponent<Props>;

WARNING: The implementation of a component will not have access to the same type in versions of React supporting string refs. The following example would be incorrect usage because Component would never have access to a ref with type string

const Component = (props: React.RefAttributes) => props.ref;