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

2021年8月15日にメンテナンス済み

結論

ReactDOM.render(element, container[, callback])
オプションのコールバックが渡されている場合は、コンポーネントがレンダーまたは更新された後に実行されます。
ReactDOM - React

たしかめる

環境

今回実行した環境です。


node.js	14.15.0
npm	6.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のコールバック処理