React v18でVFCなどの使用に関して（React、TypeScript）

目次

React v17以前

React v17以前では、以下のサンプルのように「VFC」を使用してPropsを渡していました。
また、初期値などのdefaultPropsで設定していました。

import React, { VFC } from "react";
import styles from "./index.module.css";

const Button: VFC<Props> = ({ title, onClick }) => {
  return (
    <button className={styles.button} onClick={onClick}>{title}</button>
  );
};

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

const defaultProps: Props = {
  title: "",
  onClick: () => undefined,
};

Button.defaultProps = defaultProps;

export default Button;

React v18以降

React v18以降では、「VFC」などが、非推奨になったため、以下のように修正する必要があります。
また、初期値に関しても、「defaultProps」が非推奨になるため、修正しています。
※「非推奨」というだけなので、v18時点では、VFCなどを使用したままでも良いですが、今後を考えると修正しておいても良いかもしれません。

import styles from "./index.module.css";

const Button = ({
    title = "",
    onClick = () => undefined
}: Props) => {
  return (
    <button className={styles.button} onClick={onClick}>
      {title}
    </button>
  );
};

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

export default Button;