🏄
Matsuri-tech Frontend Weekly 2023-06-14

hrdtbs

hrdtbs

2023年6月14日
MFW

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

この記事は、社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報を不定期でまとめたものです。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Matsuri-tech Frontend Weekly 2023-06-14

# Q&A

普段の業務において、質問を受けた際の回答などで有益そうなものをピックアップしています。

# Q. ページにフォーカスを戻すと入力要素に入力していた内容が吹き飛ぶ場合がある

状況

とあるReactアプリケーションで、一度ページフォーカスを外してから戻るとフォーム要素の状態がリセットされるという報告がありました。

調査

まずReact DevToolsでこの事象を再現しながらプロファイリングを取り、特定のコンポーネント以下で再レンダリングが行われていることを確認しました。次に、そのコンポーネントを調査すると内部的にuseSWRを利用しているhooksの返り値がトリガーになっていることが分かりました。

SWRには自動的にリクエストを再検証する機能があり、同一と判断された場合は再レンダリングが抑制されるはずです。つまり、レスポンスが変化している可能性ありました。 Chromeのネットワークタブから、リクエストを見るとレスポンスに含まれている配列の順序が安定していないことが分かりました。

原因

特定のAPIのレスポンスが安定していないため、SWRが行う自動再検証で異なるレスポンスを返していると判定され、再レンダリングがトリガーされていた。

# TypeScript 5.1

2023年6月1日にTypeScript 5.1がリリースされました。あまり話題になっていない気がしますが、面白い変更が入っているのでいくつか取り上げます。

# 返り値がundefinedな関数で 暗黙的なreturnが許容されるように変更

次のようなコードが許容されるようになりました。

const f = (): undefined => {
	// no returns
}

返り値の型をvoidにすれば良いだけでは？とも思いますが、利用しているライブラリなどがundefinedの返り値を要求しているケースで記述が楽になります。

interface SuperComponentProps {
	customValues: (values: string[]) => undefined | string[]
  authUser: (user?: User) => undefined | string
}

<SuperComponent
	customValues={(values: string[]) => {
	   const result = extractSuperValues(values);
		 if(Array.isArray(result)){
	     return result
	   }
		 if(Object.hasOwn(result, "data")){
			 return result.data
     }
		 // ..
		 // no returns
	}}
  authUser={(user) => {
		 if(user?.info){
       return user.name
     }
     // no returns
  }}
/>

# JSXのカスタマイズ、非同期RSCのサポート

今までNext.jsのApp Routerなどで非同期なサーバーコンポーネントを記述すると、Promiseは有効なJSX要素ではないというエラーが出ていましたが、JSXの型をカスタマイズ出来るようになったため、これに対応できるようになりました。

既に@types/reactに変更が入っているため、バージョンを上げれば非同期RSCに対応できます。

# RSC From Scratch

RSCを実装するチュートリアルがReact公式から公開されています。

これはただRSCを作るというものではなく、JSXから始まり、コンポーネント、ルーティング、非同期コンポーネント、ナビゲーション、…と一から順に実装しながら、SSRとRSCの違いや、Reactの大まかな仕組みを学べるようになっています。やりましょう。