🎉

React useRef内部ソースコードを読んでみました

2022/11/19に公開

JavaScript

サンプルコード

import React, { useRef, useState } from 'react';

const App = () => {

    const obj = useRef({
        name:"villa",
    })

    const [count,setCount] = useState(0)

    const handleClick = () => {
        setCount(c => c + 1)
    }


   return (
      <div className='container'>
        <p>{obj.current.name}: {count}</p>
        <button onClick={handleClick}>click</button>
    </div>
   );
};


export default App

マウント段階

サンプルコードの以下の行を実行します

const obj = useRef({name:"villa"})

useRefの内部を呼びます

ここのinitValueは{name:"villa"}です

dispatcherのuseRefを呼びます

内容をhookに保存します

これ見たら、{current: 保存したいオブジェクト}というデータ構造になります、だから、取り出す時には、objではなく、obj.currentで書く必要があります。

更新段階

ボタンをクリックし、再レンダリングを走らせます
サンプルコードの以下の行を実行します

const obj = useRef({name:"villa"})

ここはマウント段階と同じです。

useRefの内部を呼びます

ここはマウント段階と同じです。

dispatcherのuseRefを呼びます

updateRefを呼びます。

ここからみたら、マウント段階のhook.memoizedStateをなにも触らず、そのまま取り出しています。
useRefを囲んた値はマウント段階でhookに保存してから、ずっと変わらないことをわかりました。

サンプルコード

マウント段階

更新段階

Discussion