コールバックrefの実装方法によって ref が渡されるタイミングが異なります。
- インライン関数で渡した場合(
<element ref={(ref) => {}} />
): 再レンダリングされるたびに呼び出される - メモ化したり、クラスのメンバーに格納して各レンダリングで同じものを渡した場合: マウント時とアンマウント時にのみ呼ばれる
インライン関数で渡すと、再レンダリングのたびに2回呼び出されます。1回目の呼び出しでは null が渡され、2回目では element が渡されます。
どちらの実装方法でも、マウント時には element が渡され、アンマウント時には null が渡されます。
参考にしたページ
https://ja.reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs