Components

We write functional components in the manner of a normal function that take a props argument and return a JSX element.

interface IProps = {
  message: string;
};
const App = ({message}: IProps): JSX.Element => <div>{message}</div>;

React.FunctionComponent / React.FC

It used to be the case that you would type a function component like so:

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

This is now discouraged as it means the component can always accept children, even when you do not want this to be the case. There are several other minor drawerbacks but it’s generally best to leave out the declaration.

logo