画面が読み込まれた時にスクロール位置を一番下にしたい

Question

画面が読み込まれた時にスクロールの位置を一番下にしたいです。
useRefを使いスクロールの高さを取得してscrollTopにその値を入れようと思い refa.current.scrollTop = scroll;としたのですがconsoloe.logでみたところ代入したscrollの値に書き換わっていませんでした。
どうやって、スクロール位置を一番下にすることができるのしょうか？？

const Test: FunctionComponent = () => {
  const refa = useRef<HTMLDivElement>(null);
  if (process.browser) {
    const test = () => {
      if (refa.current !== null) {
        const scroll = refa.current.scrollHeight;
        refa.current.scrollTop = scroll;
        // scrollの値が入っていない
        console.log(refa.current.scrollTop);
      }
    };
    test();
  }
  return (
    <>
      <Header />
      <Sidebar />
      <div style={{ height: '500px', overflowY: 'auto', background: 'blue' }} ref={refa}>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
        <p style={{ height: '50px', textAlign: 'center' }}>aaa</p>
      </div>
    </>
  );
};

Comments

[kazatsuyu]

「scrollの値が入っていない」というのは、コンソールに何らかの値が出力されて、それが意図した値とは異なっていたということでしょうか？
見たところ、単純にこのコンポーネントのレンダリングが一回呼び出されただけの場合、それ以前にconsole.logの箇所には到達しないように見えます

[kakedashidesu]

scrollの値をいれているのですが、console.logでみてみると値が変わっていないです

[kakedashidesu]

到達しています

Answer 1

適当に動くように process.browser や Header など素では存在しない物を削って動かして見ましたが、初回のレンダリングではDOMオブジェクトが存在しないためscrollTopをsetしている箇所に到達せず、2回目以降（適当にクリックでstateを更新するようにして再レンダリングさせています）のレンダリング時にはスクロールしました。
https://codesandbox.io/s/little-cache-ygj4p?file=/src/App.tsx
少なくとも、DOMエレメントに対するscrollTopの設定自体はこのコードでも動くようなので、console.logの箇所で更新されないのは不可解です。上記のcodesandboxで動いているコードとあなたの手元のコードを比較してみれば何か分かるかもしれません。

なお、DOMエレメントに対する直接の操作は副作用なので、レンダリング時に行うべきではありません。
useEffectを使うか、このケースならDOMエレメントがマウントされた直後にスクロールする処理を入れれば良いように思うので、コールバック形式のrefを利用するのが良いのではないでしょうか。

Comments

[kakedashidesu]

ありがとうございます。
useEffectを使ったらうまく行きました！！
useEffectを使うよりコールバック形式のrefというものを使う方がいいのでしょうか？
const refa = useRef<HTMLDivElement>(null);
useEffect(() => {
if (process.browser) {
if (refa.current != null) {
const scroll = refa.current.scrollHeight;
refa.current.scrollTop = scroll;
}
}
});

[kazatsuyu]

useEffectは第2引数を省略した場合はレンダリングごとに毎回呼び出されるはずです。つまりこのままだとレンダリングが行われる度に末尾までスクロールしてしまうことになります。
第2引数に依存する値の配列を渡せば、それらが更新されない場合は呼ばれなくなり、空の配列にすればコンポーネントのマウント時に一回だけ呼び出されます。
コールバック形式のrefの場合は、仮想DOMから生のDOMオブジェクトが新規に作成された時に呼び出されるので、特に何もしなくても、ページを開いている間永続的に存在するDOMオブジェクトに関しては一度だけ呼び出されることになります。

[kakedashidesu]

ありがとうございます！！！