Writing Components

• Define props above the component definition.
• Use type for props definition, not interface (more details in the TypeScript section).
• Destructure props.
• Avoid using explicit types (FC or React.FC) for component definitions. For more details, read this article.
• Use arrow functions for component definitions. See the Coding Patterns section.
  • unless you need hoisting (e.g. Tanstack router Route.component definition). In that case we need to use function declaration.

Example Component

type Props = {
  foo: string;
};

export const Component = ({ foo }: Props) => {
  return <div>Component {foo}</div>;
};