ReactのuseRefを使う上での注意点 - Qiita

はじめに DOMのバウンディングボックスなどを取得する場合、hooksのuseRefを使いたいケースがあります。しかし、下位のコンポーネントにそれらの情報を渡す場合などは、注意が必要になります。 例 次のようにメッセージの右下にいいねボタンを表示したいとします。 うまくいかないパターン ThumbsUpコンポーネントに対してボタン位置の基準となるHTMLElementを渡し、ThumbsUpにてボタンの表示位置を求めています。 import React, { useRef } from "react"; import ThumbsUp from "./ThumbsUp"; import "./styles.scss"; export default function App() { const ref = useRef<HTMLSpanElement | null>(); return (