5分で読むReact豆知識 | 入門 | 第3回: 再レンダリングのタイミング

はじめに

このシリーズは、Reactの公式ページなどから特に重要と感じたトピックを選び出し、何度でも読み返せるよう簡潔にまとめたものです。

進捗管理には「いいね」か「ブックマーク」がお勧め
さらに僕のモチベーションアップになります！よろしくお願いいたします！

シリーズ一覧はこちら

再レンダリングのタイミング

再レンダリングが起こる主なタイミングは下記の通りです。

1. stateの変更

stateをset関数で更新すると再レンダリングされます。

import React, { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

2. 親コンポーネントの再レンダリング

親コンポーネントが再レンダリングされると、子コンポーネントも再レンダリングされます。

import React, { useState } from 'react'

export function ParentComponent() {
  const [input, setInput] = useState('')

  return (
    <div>
      <input type="text" value={input} onChange={e => setInput(e.target.value)} />
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  console.log('レンダリング');
  return <p>ChildComponent</p>;
}

レンダリングコストが高い、親コンポーネントの再レンダリングが頻繁な場合は、下記を使用し再レンダリングを抑制することが可能です。

React.memo
propsの参照値が変更されない限り、再レンダリングを抑制できます。
オブジェクト等、例外もあります

useCallback
propsとして渡される関数に用いることで、依存する変数が変更されない限り、再レンダリングを抑制できます。

3. Contextの値が変更された時

対象のContextを利用しているすべてのコンポーネントが再レンダリングされます。

参考サイト

こちらの記事で学ばさせていただきました。

stateの更新による再レンダリング

Contextの更新による再レンダリング

親コンポーネントの再レンダリングによる子コンポーネントの再レンダリング