React Ref でエラー

エラー内容

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

調査

どこでエラーが出力されているのかをコンソールから読み取る。

間違えたこと

• ref でエラーが出ていると思って useRef の使用箇所を調査して fowardRef へ書き換えようとした。
  • そのまま間違った解釈でエラーを修正しようとして、ドツボにはまる
  • useRef を使用しているコンポーネントを不使用にしてみるが、エラーが消えない（そりゃそうだ）
  • エラー分を読み直して、解釈の間違いに気付く

解決方法

関数を<Link>で囲む場合は、fowardRef を使用する必要がある。

参考記事

そもそも今回は、必要がなかったので削除して完了。

反省

• 思い込みで突っ走って解決までの時間がかかった。
• エラー詳細まで読むことをしていなかった。
• 何故か解決できるという根拠の無い自信があった。

改善

• 自信を持つことはいいが、過信とは別であることを認識する。
• ちゃんと文字を読むこと、読んでも全ては理解できていないということを前提としてエラーに対処する。