Skip to main content

Component Syntax

Components are the foundation for building UIs in React. Component Syntax is the standard way to write them in Flow: a dedicated component primitive, enabled by default, with several advantages over plain function components:

  • Individual named params instead of a props object. Removes the destructuring-and-typing duplication of ({name}: {name: string}) and the need to wrap props in Readonly<{...}> — component params are read-only by default.
  • No return type annotation. Flow infers and enforces React.Node, and rejects components that implicitly return on any branch.
  • Optional renders clause that constrains what JSX shape the component is allowed to produce, enabling composition contracts across wrapper components and HOCs.
  • Structural rules enforced at parse/type-check time: no this, no nested component definitions, and components can only be rendered as JSX — they cannot be called as plain functions. See Rules for Components below.
  • Better support for React refs via the dedicated ref parameter position.
TypeScript comparison

component syntax is Flow-only. TypeScript models components as plain functions plus a props type. Flow's type-checker enforces rules that TypeScript's plain-function model leaves to convention or ESLint rules. See Flow's component syntax for the full comparison.

Basic Usage​

You can declare a component with Component Syntax similar to how you'd declare a function:

1import * as React from 'react';2
3component Introduction(name: string, age: number) {4  return <h1>My name is {name} and I am {age} years old</h1>5}
Try

You can use a component directly in JSX: <Introduction age={9} name="Mr. Flow" />.

There are a few important details to notice here:

  1. the prop parameter names declared in the Introduction component are the same as the prop names passed to Introduction in JSX
  2. the order of the parameters in the declaration does not need to match the order that they are provided in JSX

Parameters​

Children​

children is the most common prop, and with Component Syntax it is just an ordinary parameter; declare it like any other. Its type is usually React.Node, which covers anything renderable (elements, strings, arrays, null, and more):

1import * as React from 'react';2
3component Card(title: string, children: React.Node) {4  return (5    <section>6      <h2>{title}</h2>