Skip to content

Instantly share code, notes, and snippets.

@salomvary
Last active October 17, 2020 14:45
Show Gist options
  • Save salomvary/59e52d13717960830ccb6aa340a47dbe to your computer and use it in GitHub Desktop.
Save salomvary/59e52d13717960830ccb6aa340a47dbe to your computer and use it in GitHub Desktop.
20 Ways of Writing React Components
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment