Ribbit's works

【React】レンダリング終了を待って処理する

#JavaScript
にメンテナンス済み
記事のトップ画像

結論

ReactDOM.render(element, container[, callback])

オプションのコールバックが渡されている場合は、コンポーネントがレンダーまたは更新された後に実行されます。

ReactDOM - React

たしかめる

環境

今回実行した環境です。

node.js14.15.0
npm6.14.9
npm i -D react react-dom

ソースコード

import React from 'react';
import { render } from 'react-dom';

render(<div></div>, document.body, onRenderingFinish);

console.log('renderの後ろの処理');

function onRenderingFinish() {
  console.log('renderのコールバック処理');
}

実行結果

renderの後ろの処理
renderのコールバック処理