React component example with comments marking decisions required from developer during creation process

ComponentWithDecisions.tsx

import * as React from 'react';

import {navigate, trackEvent} from '@common';

// decision 1: use style guide component or custom grid
import {Flex, Link} from 'brainly-style-guide';

// decision 2: use Readonly in type or not
type PropsType = Readonly<{
  href: string;
}>;

type TrackEventTypes = 'linkClick';

const LinkComponent = ({href}: PropsType) => {
  // decision 3: memoize the handler or not
  const onLinkClick = React.useCallback((event: React.SyntheticEvent) => {
    // decision 4: use const for event label or rely on types
    trackEvent<TrackEventTypes>('linkClick');

    event.preventDefault();

    // decision 5: use html nagivation or the one used below
    navigate(href);
  }, []);

  return (
    <Flex direction="column">
      <Flex>
        <Link href={href} onClick={onLinkClick}>
          Redirect
        </Link>
      </Flex>
    </Flex>
  );
};

// decision 6: memoize or not to memoize the component
export default React.memo<PropsType>(LinkComponent);