<div/> のレンダリングから始める React 学び直し

React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App

[yarumato]

“React レンダリングの原則　ちょっと寄り道: 無理り再レンダリングしてみる　副作用フェーズとレンダリングフェーズを分けることでレンダリングを冪等にできる”

[jay-es]

"useEffect を使って副作用フェーズとレンダリングフェーズを分けてやることで、prop と state が同じであれば再レンダリングを何度行っても同じ結果になる状態にできます(レンダリングが冪等)。"