【React 19】汎用性の高いコンポーネントの作り方

はじめに

以前、コンポーネント記事を書いたのですが、React 19からforwardRefを使う必要がなくなったようで、もっとシンプルに書くことが出来るようになりました。

▼過去記事(もはや古い)

2025年3月1日現在のReact最新バージョンの話なのでご注意ください。

公式

バッチリ書いてあります。

React 19 では、forwardRef は不要となりました。代わりに props として ref を渡すようにしてください。

forwardRef は将来のリリースでは非推奨化される予定です。

新しい書き方

最近の私が書いたButtonコンポーネントです。

"use client";
import { ReactNode, ComponentPropsWithRef } from "react";
type Variant = "dark" | "light";
interface Props extends ComponentPropsWithRef<"button"> {
  children?: ReactNode;
  className?: string;
  variant?: Variant;
}

//forwardRefが不要になった
export const Button: React.FC<Props> = ({
  children,
  className,
  variant = "dark",
  ...props
}) => {
  const color = () => {
    switch (variant) {
      case "dark":
        return "bg-dark_brown text-white hover:bg-white hover:text-dark_brown";
      case "light":
        return "bg-light_beige text-dark_brown hover:bg-dark_brown hover:text-white border-dark_brown";
    }
  };
  return (
    <button
      {...props}
      className={`border-solid border-[1px] w-full h-full rounded-lg py-1 ${className} ${color()}`}
    >
      {children}
    </button>
  );
};

今までの書き方だと、

export const Button = forwardRef<HTMLButtonElement, Props>(
  ({ children, className, ...props }, ref) => {

こんな感じでforwardRefを渡して普通のReact.FCで定義するコンポーネントとは違う形でしたが、この書き方をしなくても使う側でPropsにrefを渡せば良くなりました。

おわりに

簡単になってとても嬉しいです。
ButtonやInputはたくさん出てくるので、この書き方を覚えておくと統一感が出せて記述量も減り、嬉しいことがたくさんあると思います。

ぜひ活用してほしいです。