azukiazusa

React v19 から forwardRef が不要になる

2024.04.27

今までの React では ref をコンポーネントの Props として渡す際に、forwardRef を使ってラップする必要がありました。しかし、React v19 からは forwardRef が不要になり、ref を直接渡すことができるようになりました。

azukiazusa

// React v18 まで
const Button = React.forwardRef(({ onClick }, ref) => {
  return <button ref={ref} onClick={onClick} />;
});
 
// React v19 から
const Button = ({ onClick, ref }) => {
  return <button ref={ref} onClick={onClick} />;
};

azukiazusa

将来のバージョンで forwardRef は非推奨となり、削除される予定です。新しい ref Props の形式に自動で変換する codemod が提供される予定です。