Ribbit.work

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

JavaScript

last modified date2021-8-14

publish date2021-8-11

結論

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のコールバック処理

この記事をシェア

この記事を読んだ方におすすめの記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript

最新の記事

kuromoji.jsで形態素解析
2021-12-4

kuromoji.jsで形態素解析

TypeScriptJavaScript
レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】
2021-12-4

レコードのサブテーブルを並び替えて登録する【Kintone JavaScriptカスタマイズ】

JavaScriptKintone
レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】
2021-11-29

レコード一覧表示時(app.record.index.show)のサンプルコード集【Kintone】

JavaScriptKintone
スライダーを使って数値を設定できるKintoneプラグイン【無料公開】
2021-11-26

スライダーを使って数値を設定できるKintoneプラグイン【無料公開】

KintoneJavaScriptTypeScript