React components for overcoming technical debt

January 5, 2022

This article is a translation of a Japanese article I posted earlier.

Here is how to write React components, which is currently a best practice in my mind.

I believe that the code will convey my intentions, so I will skip the explanation.

What to create #

Component

The above consists of the following files. pages/index.tsx is the entry point component.

├ pages/
│ ├ index.tsx
│ ├ Heading.tsx
│ ├ EvenOdd.tsx
│ ├ IncrementButton.tsx
│ └ ResetButton.tsx
└ types/
  └ index.ts

Common type definitions #

types/index.ts

export type Empty = Record<string, never>;

export type MayStyled<T extends object> = T extends Empty
  ? { className?: string }
  : T & { className?: string };

export type Styled<T extends object> = T & { className: string };

export type UnStyled<T extends object> = Omit<T, "className">;

Components #

pages/index.tsx

import styled from "@emotion/styled";
import { useState } from "react";
import { EvenOdd } from "./EvenOdd";
import { Heading } from "./Heading";
import { IncrementButton } from "./IncrementButton";
import { ResetButton } from "./ResetButton";
import type { Empty, MayStyled, Styled, UnStyled } from "types";

type Props = Empty;

const Hook = (_: Props) => {
  const [count, setCount] = useState(0);
  const increment = () => setCount((pre) => pre + 1);
  const reset = () => setCount(0);
  return { count, increment, reset };
};

const Component = (props: MayStyled<ReturnType<typeof Hook>>) => {
  const { count, increment, reset, className } = props as Styled<typeof props>;
  return (
    <div className={className}>
      <Heading count={count} />
      <EvenOdd className="even-odd" count={count} />
      <div className="buttons">
        <IncrementButton onClick={increment} />
        <ResetButton className="reset" onClick={reset} />
      </div>
    </div>
  );
};

const StyledComponent = styled(Component)`
  padding: 24px;
  > .even-odd {
    margin-top: 16px;
  }
  > div.buttons {
    margin-top: 16px;
    > .reset {
      margin-left: 16px;
    }
  }
`;

const FunctionalStyledComponent = (props: MayStyled<Props>) => {
  const { className, ...rest } = props;
  return (
    <StyledComponent
      className={className}
      {...Hook(rest as UnStyled<typeof props>)}
    />
  );
};

export const Home = FunctionalStyledComponent;

pages/Heading.tsx

import styled from "@emotion/styled";
import type { MayStyled, Styled } from "types";

type Props = {
  count: number;
};

const Component = (props: MayStyled<Props>) => {
  const { count, className } = props as Styled<typeof props>;
  return <h1 className={className}>Current count is {count}</h1>;
};

const StyledComponent = styled(Component)`
  font-size: large;
  font-weight: bold;
`;

export const Heading = StyledComponent;

pages/EvenOdd.tsx

import styled from "@emotion/styled";
import type { MayStyled, Styled, UnStyled } from "types";

type Props = {
  count: number;
};

const Hook = (props: Props) => {
  const { count } = props;
  const isEven = count % 2 === 0;
  return { isEven };
};

const Component = (props: MayStyled<ReturnType<typeof Hook>>) => {
  const { isEven, className } = props as Styled<typeof props>;
  return (
    <p className={className}>
      This is
      <span className={isEven ? "even" : "odd"}>{isEven ? "EVEN" : "ODD"}</span>
      number.
    </p>
  );
};

const StyledComponent = styled(Component)`
  color: #666;
  > span {
    margin: 0 8px;
    &.even {
      color: #f00;
    }
    &.odd {
      color: #00f;
    }
  }
`;

const FunctionalStyledComponent = (props: MayStyled<Props>) => {
  const { className, ...rest } = props;
  return (
    <StyledComponent
      className={className}
      {...Hook(rest as UnStyled<typeof props>)}
    />
  );
};

export const EvenOdd = FunctionalStyledComponent;

pages/IncrementButton.tsx

import styled from "@emotion/styled";
import type { MayStyled, Styled } from "src/types";

type Props = {
  onClick: () => void;
};

const Component = (props: MayStyled<Props>) => {
  const { onClick, className } = props as Styled<typeof props>;
  return (
    <button className={className} onClick={onClick} type="button">
      Increment
    </button>
  );
};

const StyledComponent = styled(Component)`
  padding: 8px;
  font-size: small;
  font-weight: bold;
  color: #fff;
  background-color: #f0f;
  border-radius: 4px;
`;

export const IncrementButton = StyledComponent;

pages/ResetButton.tsx

import styled from "@emotion/styled";
import type { MayStyled, Styled } from "src/types";

type Props = {
  onClick: () => void;
};

const Component = (props: MayStyled<Props>) => {
  const { onClick, className } = props as Styled<typeof props>;
  return (
    <button className={className} onClick={onClick} type="button">
      Reset
    </button>
  );
};

const StyledComponent = styled(Component)`
  padding: 8px;
  font-size: small;
  font-weight: bold;
  color: #000;
  background-color: #ff0;
  border-radius: 4px;
`;

export const ResetButton = StyledComponent;

Thank you for reading. #

I hope this article was helpful!