🦔

React useMemoの内部実装を読んでみました

2022/11/09に公開

JavaScript

React

fibernode

tech

サンプルコード

import { useMemo, useState } from 'react';

const App = () => {
    const [dataInvolved, setDataInvolved] = useState(1)
    const [dataNotInvolved, setDataNotInvolved] = useState(1)

    const nums = useMemo(() => dataInvolved * dataInvolved, [dataInvolved])
    const handleClick = () => {
        setDataInvolved(d => d + 1)
    }

    const handleClick2 = () => {
        setDataNotInvolved(d => d + 1)
    }

   return (
       <div className='container'>
        <button onClick={handleClick}>click</button>
        <button onClick={handleClick2}>click2</button>
        <p>count:{nums}</p>
       </div>
   );
};
export default App

動作

clickをクリックしたとき、countが変動します
click2をクリックしたとき、countが変動しません

メモリ図

内部実装

mount時

Appを実行します
useMemoを実行します

mountMemoを実行します

hookオブジェクトを生成します

callbackを実行します

callbackの実行結果と今回のdepsをmemoします

callbackの実行結果をAppにreturnします

React useMemoの内部実装を読んでみました

サンプルコード

動作

メモリ図

内部実装

mount時

関連stateのアップデート時

説明動画

Discussion