Check the render method of `Controller`. の解決

なぜこの警告が表示されるのか？

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

この警告は、関数コンポーネントに直接 ref を渡そうとした場合に表示されます。
関数コンポーネントはクラスコンポーネントとは異なり、インスタンスや DOM 要素を直接持たないため、通常の方法で ref を受け取ることができません。

問題のコード例

問題のコード例では、以下のように Button 関数コンポーネントが定義されていますが、このコンポーネントは ref を受け取ることができないため、もし ref を渡そうとすると警告が表示されます。

import React, { FC } from 'react';

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

const Button: FC<Props> = ({ onClick, children }) => {
  return <button onClick={onClick}>{children}</button>;
};

解決後のコード例

forwardRef を使用することで、コンポーネントは ref と props を引数として受け取る関数として定義され、ref を DOM 要素に正しく渡すことができるようになります。

import React, { forwardRef, ForwardRefRenderFunction } from 'react';

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

// ForwardRefRenderFunction は forwardRef を使用する関数コンポーネントに適用される型
const Button: ForwardRefRenderFunction<HTMLButtonElement, Props> = (props, ref) => {
  const { onClick, children } = props;
  return <button ref={ref} onClick={onClick}>{children}</button>;
};

export default forwardRef(Button);