20 Ways of Writing React Components

20 Ways of Writing React Components.tsx

import React, { createElement, Component, FC, Fragment, FunctionComponent, ReactNode } from 'react';
import createReactClass from 'create-react-class';

const C = () => <></>;
const C: FC = () => <></>;
const C: () => ReactNode = () => <></>;
const C: FunctionComponent = () => <></>;
const C = (props) => <>{props.p}</>;
const C: (props: {p: string}) => ReactNode = (props) => <>{props.p}</>;
const C = (props: {p: string}) => <>{props.p}</>;
const C = ({ p }: {p: string}) => <>{p}</>;
const C: FC<{p: string}> = (props) => <>{props.p}</>;
const C = () => { return <></>; };
function C() { return <></>; }
const C = function() { return <></>; };
const C = function K() { return <></>; };
const C: FC = function L() { return <></>; };
class C extends Component { render() { return <></>; } }
class C extends Component<{p: string}> { render() { return <>{this.props.p}</>; } }
class C extends Component<{p: string}> { render() { const { props: { p } } = this; return <>{p}</>; } }
class C extends Component { render = () => <></>; }
const C = class extends Component { render = () => <></>; };
const C = createReactClass({ render: function() { return <></>; } });
const C = () => createElement(Fragment);
export default () => <></>;

// by @salomvary

// Honourable mentions
//
// Using React.Component, React.FC, etc. instead of directly importing them
// React.memo https://reactjs.org/docs/react-api.html#reactmemo
// React.PureComponent https://reactjs.org/docs/react-api.html#reactpurecomponent
// PropTypes https://www.npmjs.com/package/prop-types
// Component#displayName https://reactjs.org/docs/react-component.html#displayname
// <React.Fragment/> https://reactjs.org/docs/react-api.html#reactfragment
// Many ways of managing state
// Various ways of typing props.children
// let, var ;)
// Function constructor, eval