Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

React のコールバックrefが呼び出されるタイミングは、コールバックrefの実装によって違う

コールバックrefの実装方法によって ref が渡されるタイミングが異なります。

  • インライン関数で渡した場合(<element ref={(ref) => {}} />): 再レンダリングされるたびに呼び出される
  • メモ化したり、クラスのメンバーに格納して各レンダリングで同じものを渡した場合: マウント時とアンマウント時にのみ呼ばれる

インライン関数で渡すと、再レンダリングのたびに2回呼び出されます。1回目の呼び出しでは null が渡され、2回目では element が渡されます。

どちらの実装方法でも、マウント時には element が渡され、アンマウント時には null が渡されます。

codesandbox で作ったデモ

参考にしたページ

https://ja.reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs