ReactにおけるRef：DOMへのアクセスから命令的APIまで | POSTD

この記事では、ReactにおいてDOMへのアクセスが必要な理由と、その際にRefがどう役立つのかを見ていきます。また、useRef、forwardRef、useImperativeHandleという3つのフックについて説明し、これらを適切に使用する方法を紹介したいと思います。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useRefを使用してReactでDOMにアクセスする 親から子にRefをpropとして渡す forwardRefを使用して親から子にRefを渡す useImperativeHandleを使用した命令型API useImperativeHandleを使用しない命令型API Reactには

[shingo-sasaki-0529]

useRef は DOM 操作するための API でなく、ただ再レンダリングから独立した参照を持つオブジェクトでしかないってのがポイントか。だから何度再レンダリングされても同じ変数で狙った DOM にアクセスできる。

[yosuke_furukawa]

翻訳されましたー

[IzumiSy]

MUI DatagridがこのapiRefのパターンを採用していていい感じだった