<h2>情報ソース</h2>
<ul>
<li>reactjs/refcs
<a href="https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md" target="_blank" rel="nofollow noopener noreferrer">https://github.com/reactjs/rfcs/blob/useevent/text/0000-useevent.md</a></li>
</ul>
<h2>まとめ</h2>
<ul>
<li><code>useEvent</code>は常に同一であることが保証されたイベントハンドラーを定義するためのHookである。</li>
<li><code>useEvent</code>の基本的な使い方</li>
</ul>
<pre><code class="language-jsx">function Chat() {
 const [text, setText] = useState(&#x27;&#x27;);
 
 const onClick = useEvent(() =&gt; {
 // useEventの中ではprops/stateの値は呼び出した時点の値である。
 // つまりprops/stateの値が何であるかについては直接イベントハンドラーを定義する場合と同じ挙動となる。
 // 一方で直接イベントハンドラーを定義すると毎回のレンダリングで関数の同一性が保たれず無用な再レンダリングの原因となる場合があるが、
 // useEventを使って定義されたイベントハンドラーはレンダー間で同一性を保つため無用な再レンダリングを避けることができる。

 sendMessage(text);
 });
}
</code></pre>
<ul>
<li><code>useEvnet</code>には依存配列がない。</li>
<li>イベントハンドラー内でprops/stateを読み取ることは最適化を邪魔していた。</li>
</ul>
<pre><code class="language-jsx">function Chat() {
 const [text, setText] = useState(&#x27;&#x27;);
 // このonClick関数はChatがレンダリングされるたびに異なる関数として定義される
 const onClick = () =&gt; {
 sendMessage(text);
 };
 
 // text stateが変化したときのみSendButtonは再レンダリングされるべきである。
 // 仮にtext stateの更新がなくとも親コンポーネントの再レンダリングを起因とする再レンダリングのカスケード
 // によってChatが再レンダリングされ、結果、SendButtonが再レンダリングされる可能性がある。
 // この実装ではたとえSendButtonがmemo化されていてもonClick関数はレンダリングごとに異なるため結局のところ再レンダリングが起こってしまう。
 return &lt;SendButton onClick={onClick} /&gt;;
}
</code></pre>
<ul>
<li>現時点で上の問題を解決するには以下の<code>useCallback</code>を使用するとよい。</li>
</ul>
<pre><code class="language-jsx">function Chat() {
 const [text, setText] = useState(&#x27;&#x27;);
 
 const onClick = useCallback(() =&gt; {
 sendMessage(text);
 }, [text]);
 
 return &lt;SendButton onClick={onClick} /&gt;
}
</code></pre>
<ul>
<li>上のコードでtext stateが変化した場合onClickは依然として毎回のレンダリングにおいて異なる関数となる。（textを新しい値にバインドするため）</li>
<li>また依存配列からtextを除去することはできない。 除去すると最初のレンダリング時のtext stateの値からstateが更新されなくなるため。</li>
<li><code>useEvent</code>を使用すると以下のように書くことができる。</li>
</ul>
<pre><code class="language-jsx">function Chat() {
 const [text. setText] = useState(&#x27;&#x27;);
 
 const onClick = useEvent(() =&gt; {
 sendMessage(text);
 });
 // onClickはレンダー間で常に同一なのでSendButtonのメモ化がうまく機能する
 // text stateが変化してもmemo化が機能することに注意
 return &lt;SendButton onClick={onClick} /&gt;
}
</code></pre>
<ul>
<li>useEventがイベントハンドラーが変更されたとき<code>useEffect</code>が再び呼び出されるべきではない。</li>
</ul>
<pre><code class="language-jsx">function Chat({ selectedRoom }) {
 const [muted, setMuted] = useState(false);
 const theme = useContext(ThemeContext); 
 
 useEffect(() =&gt; {
 const socket = createSocket(&#x27;/chat/&#x27;, + selectedRoom);
 socket.on(&#x27;connected&#x27;, async () =&gt; {
 await checkConnection(selectedRoom);
 showToast(theme, &#x27;Connected to &#x27; + selectedRoom)
 });
 
 socket.on(&#x27;message&#x27;, () =&gt; {
 showToast(theme, &#x27;New message: &#x27; + message);
 if (!muted) {
 playSound();
 }
 });
 socket.connect();
 return () =&gt; socket.dispose();
 }, [selectedRoom, theme, muted]);
}
</code></pre>
<ul>
<li>上のコードの問題はthemeやmutedを変更すると、接続する部屋を変更していないのに同じ部屋に対してsocketを再接続することになる（selectedRoomが変更されたときにsocketが接続されることは問題がないことに注意）</li>
<li>socketのコールバックを<code>useCallback</code>にしたとしてもそれらの依存リストは依然として<code>theme</code>と<code>muted</code>を含んでいる。</li>
<li>したがって<code>theme</code>と<code>muted</code>が変更したときにコールバックの同一性は壊れる。<code>useEffect</code>の依存配列には<code>theme</code>と<code>muted</code>の代わりにコールバック関数が渡されることになるが結局コールバック関数は同一性が壊れるので<code>useEffect</code>が実行される。よって<code>useCallback</code>ではsocketの再接続は避けられない。</li>
<li><code>useEvent</code>はこの問題に対する自然な解決方法である。</li>
<li><code>useEvent</code>は関数の同一性を保ちながら常に最新のprops/stateを持つ</li>
</ul>
<pre><code class="language-jsx">function Chat({ selectedRoom }) {
 const [muted, setMuted] = useState(false);
 const theme = useContext();
 
 // onConnectedは同一性が保たれる
 const onConnected = useEvent(connectedRoom =&gt; {
 console.log(selectedRoom); // useEffect内でonConnectedが呼ばれたときselectedRoomは最新の値を指す
 showToast(theme, &#x27;Connected to &#x27; + connectedRoom); // connectedRoomはuseEffectが実行されたときのselectedRoomを渡しているので過去の値である。
 });
 
 const onMessage = useEvent(message =&gt; {
 showToast(theme, &#x27;New message: &#x27; + message)
 if (!muted) {
 playSound();
 }
 });
 
 // themeとmutedの変更でuseEffectの関数をトリガーしたくない場合は次のように書くことができる。
 // 接続と切断は純粋にselectedRoomの変更のみにトリガーされる。 
 useEffect(() =&gt; {
 const socket = createSocket(&#x27;/chat/&#x27; + selectedRoom);
 socket.on(&#x27;connected&#x27;, async () =&gt; {
 await checkConnection(selectedRoom);
 onConnected(selectedRoom);
 });
 
 socket.on(&#x27;message&#x27;, onMessage);
 socket.connect();
 
 return () =&gt; socket.disconnect();
 }, [selectedRoom]); // 部屋が変わったときにのみsocketの再接続が行われる。
}
</code></pre>
<ul>
<li>useEventで関数を何回ラップしてもその関数はuseEventで一回ラップしたときと同じ挙動になる。</li>
<li>ただし無駄な処理が増えることに注意。</li>
</ul>
<blockquote>
Whenever you have an effect where re-firing on data change doesn’t make sense, the idiomatic solution will often be to extract an event from it.
</blockquote>
<ul>
<li>データが変化による副作用の発火に意味がない場合はいつでもこの解決方法によってイベントを抽出できる。</li>
</ul>
<pre><code class="language-jsx">function Page({ route, currentUser }) {
 useEffect(() =&gt; {
 logAnalytics(&#x27;visit_page&#x27;, route.url, currentUser.name);
 }, [route.url, currentUser.name]);
 // ...
}
</code></pre>
<ul>
<li>この実装をおこなった後、<a href="http://currentUser.xn--nameUIuseEffectcurrentUser-m83yca31a8cuh4f86axctb4pe89324aniyb9l6g9upq.name" target="_blank" rel="nofollow noopener noreferrer">currentUser.nameを変更するUIを追加すればuseEffectによってcurrentUser.name</a> propの変化ごとにuseEffectがトリガーされてしまう。</li>
<li>この場合「ページのログをとる処理」に対して意味のあるuseEffectの発火のタイミングは「urlが変更されたとき」のみである。</li>
<li>urlが変更される（ユーザーがページを訪れる）ことはある種のイベントであると考えると<code>useEvent</code>の適用を考えることができる。</li>
<li>以下のように<code>useEvent</code>を使用することでurl変更というイベントにのみ再発火する副作用を書くことができる。</li>
</ul>
<pre><code class="language-jsx">function Page({ route, currentUser }) {
 const onVisit = useEvent(vistedUrl =&gt; { 
 // onVisitイベントを引き起こした変更を引数にとりイベント内で使用しなければイベントと処理の組みが噛み合わなくなるので注意する。
 // routeを使用してしまうと「最新のroute」が使用されしまうことになるので注意。
 logAnalytics(&#x27;visit_page&#x27;, visitedUrl, currentUser.name);
 });
 
 useEffect(() =&gt; {},
 onVisit(route.url)
 [route.url]); // routeが変化したときのみ再実行される。
}
</code></pre>
<ul>
<li>実装のおおよそ以下のようになるだろう。</li>
</ul>
<pre><code class="language-jsx">function useEvent(handler) { //useEventはイベントハンドラーを引数にとる
 // イベントハンドラーを保持するためのhandlerRefを用意
 // イベントハンドラーを保持するのはイベントハンドラーの同一性のため
 const handlerRef = useRef(null);
 
 useLayoutEffect(() =&gt; {

 // 実際の実装ではlayout effectよりも前に実行されるだろう。
 // コンポーネントレンダリング時にイベントハンドラーが保存される。
 handlerRef.current = handler;
 });
 
 // useEventはuseCallbackの返り値を返す。（実際の実装では異なる）
 return useCallback((...args) =&gt; {
 // refに保存しているイベントハンドラーを呼び出し結果を返す処理をuseCallback内に書く
 const fn = handleRef.current;
 return fn(...args);
 }, []);
}
</code></pre>
<ul>
<li>useEventはパスした最新のイベントハンドラーを呼ぶ、安定した（レンダー間で同一性が保証された）関数を返す。</li>
</ul>
<ol>
<li>コンポーネントの初回レンダリング時にuseEventが呼ばれる。</li>
<li>useRefによってコンポーネント外部に値を保存するための変数が作られる。</li>
<li>useLayoutEffectによってDOM更新の前にhandler.currentにhandlerが格納されている状態になる。つまりブラウザレンダリングが終わったときにはすでにhandlerはhandler.currentにhandlerが代入されている。</li>
<li>handler.currentをuseCallbackでラップした関数を返す。このときuseCallbackの依存配列は空の配列である。</li>
</ol>
<ul>
<li>
<code>useEvent</code>でラップされたイベントハンドラーがレンダリング中に呼び出された場合はthrowされる。
</li>
<li>
これにより、イベントハンドラーの中のprops/stateが変化するにも関わらず関数の同一性を保つことを安全に行うことができる。
</li>
<li>
イベントハンドラーはレンダリング中に呼ばれることはないのでレンダリングのアウトプットに影響しない。
</li>
<li>
したがってそれらのインプットが変化したときにイベントハンドラーが変化する必要がない。（イベントハンドラーはreactiveである。）
</li>
<li>
ハンドラーの&quot;現在の&quot;バージョンは全てのレイアウトエフェクトが実行される前に切り替えられる。
</li>
</ul>

useEventについて