ep.89 『React 18 Alpha の新機能と私たちに試されるパラダイムシフト』 | UIT INSIDE

2021/06/18 に公開3802 views

このエピソードについて

先日公開された React 18 の新機能や変更点について、@spring_raining が @uhyo_ に聞きました。

React 18 注目のアップデート

React 18 release timeline (予定)
- https://reactjs.org/blog/2021/06/08/the-plan-for-react-18.html
- Library Alpha: 公開済み
- Public Beta: 少なくとも数ヶ月
- Release Candidate (RC): Beta公開後少なくとも数週間
- General Availability: RC公開後少なくとも数週間

React 18 alpha版発表まとめ: https://zenn.dev/uhyo/articles/react-18-alpha-essentials
- Automatic Baching
- Concurrent Mode → Concurrent Rendering

React 18 におけるSuspense

<Suspense> 単位での部分的なSSRとHTMLストリーミング
React Server Componentsとの関係は？
- 参考: https://uit-inside.linecorp.com/episode/76

startTransition の役割

startTransition のGlobal API化
「transition」による優先度の明示

StrictMode での useEffect の挙動

StrictMode コンポーネント下では、より望ましい実装のため useEffectの挙動が変化する
- useEffect(() => { /* ... */ }, []) が複数回実行される可能性
- React の考える理想の Lifecycle と Effect
Built-inで提供されるSuspenese Cache

Refs

LINE 新卒採用 2022
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:04
こんにちは、UITの玉田です。今回も、UIT INSIDEを始めたいと思います。

Guest 00:10
UIT INSIDEは、ユーザーインターフェースのテクノロジーを愛する開発者のためのポットキャストです。

Guest 00:17
エピソードの一件や、ご感想がもしありましたら、いつでもツイートしてください。それでは早速今回

Guest 00:25
お呼びしたゲスト者さんをお呼びしておりますので、あのお2人でま、2人ではい、話していきたいと思いますよろしくお願いします

Guest 00:32
はい、今日です今日はよろしくお願いします。

2. React 18注目のアップデート 00:38

Guest 00:38
はい、ではえ、今回はおなじみの所産をお呼びしまして、大注目の役と18

Guest 00:47
について話していきたいなと思います。はい、で、

Guest 00:51
まあ、もしこれ聞かれてる方は多分ご存じかなとは思うんですけれども、先日。リアクトバージョン18のライブアアルファがはい、

Guest 01:01
公開されました。

Guest 01:03
でですね、これは、まあのちの正式リリースされていくんですけど、あと数ヶ月後にパブリックベータが出て、で、その数週間後にrcが出てで、そのすし、週間後に

Guest 01:17
はい

Guest 01:17
正式リリースという形のもので、まあまだまだあの、多分こうフィードバックを待っているっていう状態ではあると思うんですけれども、まあ、なかなかこう

Guest 01:28
でかい変更が色々あるということで、まあそこについて、まあ、まずは人さんにどんなことがあ、

Guest 01:36
起こるのかっていうところをまざっくりとお話していただきたいと思います。では、よろしいでしょうかね。

Guest 01:44
はい、そうですね、リアと18のアルファが出てから、twitterとかでも色々感想を見てたんですけども。

Guest 01:51
まあ、1番反響が大きいのは、このオートマティックバッチングってやつですね。つまり

Guest 01:58
ま従来リアクトってこうステートのアップデートをこう連続して、何回も行うと、

Guest 02:03
ま一部の場合を除いては、毎回毎回リギにサイレンダリングが走ってたんですよね。

Guest 02:10
それをまリアクト18からは、自動的にこうバッチしてくれる、つまり、1回のサイレンダリングしか怒んないようにしてくれる

Guest 02:18
ていうのがありましてま、これはまあまあ何も考えずに使えて、普通に便利だっていうことで、なかなかその意味では反響が大きかったかなと思います。

Guest 02:29
そうですね、これは特になんかあのこちら側で対応みたいな。そういう結構バッチって、なんか別に

Guest 02:39
それは自動でやってくれるもんなんですかね。

Guest 02:42
あ、そうですね、こっちは従来通り、普通にセットステートみたいな指出しを並べて書くだけで、自動的にリラフト18からは

Guest 02:51
あ、パッチされて、1回のサイレンダリングになるっていう流れみたいですね。

Guest 02:55
はいはい、

Guest 02:57
これは従来そういうコードがもしあったとしたら、リアクト18にアップデートしたら、自動的にバッチリま挙動が変わることにはなるんですけど、ま、ある意味では、

Guest 03:05
プリーキングチェンジであるところなんですけど、ま、これはさすがにリスクが少ないだろうっていうことで、リア18では、自動的にそういう風になるようになってますね。

Guest 03:15
確かに、それ前提にコード書いてるっていうのは見たことないです。まあ、そうですよね、

Guest 03:21
なんかでも一応なんかバラバラなアプレートっていう需要もないわけではないらしくて、見た感じ。新しいオフトアウトのためのバッチしないためのAPIみたいなのが

Guest 03:30
提供されるらしいですね。なんか、フラッシュシンクみたいな、そんな名前だったと思います。あと、まあそれとは別の話で、

Guest 03:40
私がちょっと気になっていたのが、前々から2019年くらいからリアクトって、次はコンカレントモードだぞ。みたいなことを言ってたじゃないですか、自分も

Guest 03:49
結構コンカレントモードがすごい気になってて、生地とか書いたりしてたんですけど、まあ、そのコンカレントモードってのもいよいよ、リアと18で

Guest 03:57
リリースされそうな見込みが出てきたわけですよね。ただ、コンカレントモードって名前は実はやめたらしくて、

Guest 04:06
コンカレントレンダリングという風に変わったらしいです。

Guest 04:11
そう、これまで散々言ってたコンカレントモードっていう名前を忘れてきたのは、ちょっと驚きだったんですけど、中身を覗いてみると、なんか、モードっていうのが

Guest 04:20
ゼロが。百科の概念で、コンカレントモードを使うためには、完全にコンカレントモードにスイッチしなきゃいけないみたいなのが、

Guest 04:27
やっぱり移行の障壁になるっていう考えがあるみたいだったので、従来、コンガレントモードって言われてた機能、もっと分割して、徐々にオプトインできるように

Guest 04:37
していくという、そういう意図を込めて、コンカレントレンダリングという風に名前を変えたらしいですね。

Guest 04:43
あ、なるほど、じゃあ要するに動画自体はあの、今回イントモードから変わらずになんかこうなんてすか。段階的にこうできるっていうことを分かりやすくするための

Guest 04:53
名前の変更って感じですか。

Guest 04:54
そうっすね、そうですね、なんか、ラブ的に多分、ちゃんと段階的な移行をサポートするために、なんか、APIの変更とか、アキテクチャの変更とかあったのかもしれないですけど、

Guest 05:04
まあ、目指すところとか、どういうことができるようになるのかっていうのは、基本的にコンファレントモードと言ってた時代から変わらないとは思います。

Guest 05:14
昨日の一覧見てたら、ユーズトランジションとか、ユーズディファードバリューとか。あと、サスペンスリストっていうAPIが名前が上がってますけど、この辺は

Guest 05:23
まあ以前出ていたホンカレントモードのエクスペリメンタルなビルドにもま入っていた機能ですね。なので、その辺はそんなに変わらずに

Guest 05:33
使っていけるリアクト18で、無事に入りそうという見込みなんだと思います。

Guest 05:40
なるほど、ありがとうございますじゃあまあ次18ではもう次に使える。もうちゃんとなんか

Guest 05:51
こう正式な機能として使えるっていう。

Guest 05:53
そうですね、そうですね、ほんとに楽しみですね。

Guest 05:58
あ、じゃあともう1つ反響が大きかったのが、ssrが強化されるっていう話ですね。

Guest 06:06
はいはい、

Guest 06:08
つまり、従来と17枚のssrというのはま、基本的にはまデータを全部取ってからaml1発ばって出力して、それを

Guest 06:17
クラウンドに送るみたいなことやってたんですけど、それがどうもまだ満足いかないと。つまり、

Guest 06:24
ssrって、大抵はデータベースとかから取ったデータをhmlに混ぜ込んで、こう表示できることに意味があると思うんですけど。

Guest 06:32
でも、よく考えると、ページの中で、実際にそのデータベースから読んだデータを使ってるのは一部分だけで、他の部分はま極論ssr

Guest 06:41
じゃなかった極論データベースから取ってきたデータがなくて、も、ま表示はできちゃうはずなんですよね。

Guest 06:48
なので、そういったものまで、データベースからのレスポンスを待ってるのはちょっと。なんかベストではないっていうことらしくて。なので、

Guest 06:58
なんか、データベースからもうデータを待ってる途中にもうhtmlを送り始めるみたいな。そういうことが、

Guest 07:06
リアと18ではssrでできるようになるらしいです。

Guest 07:11
おお、なんかあれですよね、あの、結構ssrと言いつつ、

Guest 07:19
ほぼあの側だけしかかいかい。最初は帰ってこないみたいなのとか、たまにはいありますけど、なんはいい、これはい

Guest 07:29
はあれですよね。その今回の形でなんか

Guest 07:34
な治るっていうか、あの解決策を得られるみたいな感じですよね。うん、

Guest 07:40
そうですね、リアクト18のssrだと、本当にまデータを使う部分

Guest 07:46
だけはまだまあ、1番最初のレスポンスhtmlでは帰ってこなくて、それ以外はもう全部ちゃんと埋まってるみたいな状況にはなるらしくて、

Guest 07:56
しかも面白いところがなんかssrの最中にデータが読み込み完了した場合、

Guest 08:02
あっていうのは、まあ、サーバー側でデータベースとかからデータを読み込むのが終わった場合、そのhtmlのスリーの中で、なんかjavaスクリフトを送ってきて、

Guest 08:10
すでにレンダリングされたローリングの部分を書き換えて、下のデータを入れるみたいな。そういう挙動らしくて、はいはい、だから、

Guest 08:19
なんかデータが来たら、ローディング画面から、実際のデータにサイレンダリングするっていう処理さえも、クライアントのリアクトがなくても、ssrだけで動くという

Guest 08:29
あ、途中途中で差し込んだりっていうことができるんですね。

Guest 08:34
そうそうそうなんですよ、そうだから、amlは上から下に。はいはい、データが流れてくるだけだから、普通はできないんですけど、

Guest 08:43
そこはなんかamで流れてるから、途中に唐突にスクリットタが出てきて、ジャバスクリットで、前にレンダリングしたやつを書き換えるっていうま、ちょっとア技みたいな感じで、

Guest 08:52
うん、クリアしてるわけですね。

Guest 08:54
ああ、なるほどなんかあれですね、その今あの予算が書かれた

Guest 09:02
やと、18アルファバン発表まとめのブログを読みながら話してるんですけれどもあれですね。このそれ

Guest 09:09
ありがたいあ、はい、

Guest 09:11
あのhtmをなんかその1回そのスクリプトを埋め込んだ状態で送ってるのかと思いきや。

Guest 09:21
そっか、そうもう送ってる途中でも、うん、あ、そっかってなると、ま、その

Guest 09:30
あの、別にその送ってる途中で、そのhtmlの前のあの、もう既に送ったところを書き換えたりとかっていうところが

Guest 09:42
できるから、挙動としては、はい、多分挙動としては、なんか最初まローリング中のhtmlが一瞬でサーバーから送られてきて、

Guest 09:52
だけど、まだなんか、サーバーからのamのストリームが閉じてないみたいな状態が多分続く

Guest 10:00
で、サーバーバーで読み込み完了したら、サーバーバでssrして、できたら、ももにスクリフトがサーバーからamlで送られてきて、

Guest 10:08
それを読んだクライアントがレンダリング済みのところを書き換えるという挙動ですね。

Guest 10:14
はあ、なるほど、すごいあれあれですね。サーバーサイドレンダリングそこまでやるかっていう

Guest 10:23
そうま、多分そうしてる理由は、クライアント側でフルのリアクトを読み込むのは、多分もっともっと時間がかかるだろうっていう。

Guest 10:31
ああはいはいはい。

Guest 10:33
クライアント側でリアクト読み込まれて、サイレンダリング走るのを待つよりは、サーバー側からスクリフト送って書き換えちゃった方が多分早いという

Guest 10:43
そういうことらしい。なるほど、

Guest 10:46
すごいすごいですね、

Guest 10:49
そうしかも、なんかもっとすごいことがあって、なんか、そういうサーバーからhtmlが送られてきてる途中に

Guest 10:56
クラウントであ、リアクトの読み込み完了しちゃったみたいなことも起こり得ると思うんですけど、

Guest 11:01
そういう時は、すでにレンダリングされたところだけ、ハイドレーションが進むらしくて、ssr完了前から、

Guest 11:08
部分的にハイドレーションが行われるという。個人的にはそうこれ見た時、そこまでやるかって思いましたね。

Guest 11:14
これすごいですね。つまり、その追加のそのレンダリング結果をえ、受け取ると同時に、まあ読み込みもらって

Guest 11:24
そうですね。ほんと。もうこれはssrで理論的に行ける催促まで行ったなって印象ですね。

Guest 11:32
これ、あの、私最初読んだ時、ちょっとあのあれを思い出しましたね。今年の

Guest 11:39
冬頃ですかね。リアクトサーバーコンポンレンズっていう、

Guest 11:44
はいはい、

Guest 11:46
あの、あ、rfcが出たと思うんですけど、

Guest 11:49
ありありましたね。

Guest 11:50
それに、近いのかなと思ってたんですけども、その送る仕組みが全然違いますね。さっきの話を聞くと、

Guest 12:00
そうっすね、ま、ssrssr独自でなんか進化してる感じですね。でも、なんか、

Guest 12:06
サーバーコンポーネントだと、クライアントとサーバーのやり取りが、なんかamじゃなくて、変なjソみたいなものが送られるはずで、

Guest 12:15
ssrはそうじゃなくて、あくまでhtmlを送ってくるんですよね。

Guest 12:19
まあ、その辺が違うのかなと。あと、そもそもサーバーコンポーレンスってssrっていうか、ユニサルレンダリングだけじゃなくて、ステードルアップデートのサイレンダリングの時も、

Guest 12:29
いちいちサーバーに問い合わせるみたいな。そういうアキテクチャだったと、自分の記憶はあ、そうそうそうそうですよね、なので、

Guest 12:36
そういう点でも、まあ、ssrとはちょっと別物かなっていう印象ですね。

Guest 12:40
まあ、そのまどっち使おうかっていう問題ではない感じはしません。どっちも伝えますけど、ssrのこっちは

Guest 12:48
あれですね、めちゃくちゃそこまでやるかっていう感じがします。

Guest 12:52
そう、これはなかなかすごいと思いますね、

Guest 12:56
なるほど、はいでは、じゃあ、さっきあのサスペンスの

3. React 18におけるSuspense 12:59

Guest 13:04
話がちょっと出てきたと思うんですけれども、まサセンスのなんか変更っていうか、こう18で

Guest 13:13
新しく入ってくるっていうか、まあまだそもそもサスペンス入ってないんですけど、あの、正式に入ってないんですけれども、18で変更されるところっていうところを

Guest 13:23
もう少し聞いてみたいなと思います。

Guest 13:26
そうですね、確か、リアクトからの発表でそんな記事というか、ディスカッションが1つありました。

Guest 13:33
リフェラルチェンジと、サスペンスンリアクト18みたいなんですけど、これ割と。なんか従来の

Guest 13:42
リアト16でのサスペンスっていうのも、リアクト16でも、サスペンスは実は存在していて、ただ、リアクトロットレイジーと組み合わせるという音だけが存在していたんですけど、

Guest 13:52
そん時なんか、サスペンスの中で、片方のコンポーネントがサスペンドして、もう片方はそうじゃないみたいな時に、なんかもう片方の

Guest 14:01
サスペンドしない方のレンダリングは進むか、進まないかみたいな挙動の違いが、リアルと16から18で発生してみたいですね。

Guest 14:11
ただ、これはまい一応まブレーキングチェンジだから説明されてるっていう側面があると思っていて、多分

Guest 14:18
実用上そんなに問題になることはないんじゃないかなって思っています。だからこそ、リアクトでも、まあ、オプトインとかじゃなくて、

Guest 14:27
ベーキングでチェンジを起こしちゃうっていう選択肢を取ったのかなと思いま。

Guest 14:32
はいはいはいま、そもそもサッセンス自体があのちゃんと導入されているわけではないっていうま、その実験的な機能、

Guest 14:41
一応、一応そういうこと扱い

Guest 14:44
そうですね。

Guest 14:47
ただ、今後リアクト18が出てきたら、このサスペンスっていうのは、ものすごく重要になってくると思っています。

Guest 14:56
っていうのも、さっき、ちょっと今までコンカレントモードってたものが、コンカレントレンダリングに名前変わりましたよ。みたいな話をしたと思うんですけど、サスペンスは特に

Guest 15:06
変更なく、サスペンスのままでまサスペンスの挙動とか、セマンティクスっていうのも、ほとんどま、最初にコンカレントモードが発表された時から変わってないんですよね。

Guest 15:17
つまり、このサスペンスこそがまあ、コンカレント時代のリアクトのま基礎というか、コアというか、ベースになるものなので、

Guest 15:26
なんかリアクト18能、新機能。ちょっと色々興味あるなっていう人は、まずこのサスペンスをがっつりと理解するのがとてもおすすめだなと思っています。

Guest 15:36
なるほど、はいはい、確かに、さっきのssrのところとかも普通にサスペンスをそうサスペンスがこう境目になっているので。

Guest 15:46
あ、そうなんですよなんか、最初ローリング中の部分は、ローリング中のhtmlが最初は送られてくるよみたいな話をしましたけど、

Guest 15:55
どこがじゃあローリング中なのかっていうことは、我々がコンポーネントツリーの中にサスペンスって書くことによって

Guest 16:02
まリアクトが知ることができるっていうアクテクシャーになってるので、その意味で我々が適切にこうサスペンスを配置してあげることが

Guest 16:11
ま、ベストのパフォーマンスのために必要になってくるんですよねね。幸いにもまさっきも言った通り、サスペンスの概念しては、最初にリアクトが

Guest 16:20
コンカレントモードとか言い出した時からあんまり変わってないので、多分既存の情報とかもサスペンスに関しては結構あると思うので、ぜひですね。

Guest 16:29
ほんとに、リアフトの18のこういった新しい縄の恩恵受けたいっていう方は、今からサスペンスについて予習しておくといいんじゃないでしょうか。

Guest 16:38
はい、もう是非しよし、私もなんか説明できるほどわかっているかというと、そうでもないので、まあ、

Guest 16:46
あれですね、説明できるレベルに勉強したいですね

Guest 16:51
ね、ほんとにまとても面白いので、ぜひ勉強してみてください。

4. startTransitionのGlobal API化 16:58

Guest 16:58
で、まあ、なんかいきなりそのサスペンスとか出てきて、

Guest 17:02
もういきなりここのこ。これからの話はもうサスペンス前提みたいな感じになってしまい、申し訳ないんですけれども。あと、もう1つ変更

Guest 17:11
点でいうと、スタートトランジションのグローバル、picというところが、はい

Guest 17:17
はいはい、このスタートトランジションていうのが、リアクトのディスカッションで、ニューフィーチャーとして、説明されてるんですよね。

Guest 17:25
実際、完全に新しいってわけじゃなくて、マグローバルapaか、グローバルAPIかっておっしゃっていただいた通り。

Guest 17:32
なんか、リアクトコンバレントモードの時のユーズトランディションというAPIを経由することで、既にこのスタートトランジションソートのものを使えたんですけど、

Guest 17:41
まあ、今回のアナウンスでは、ユーズトランディションを経由しなくても、直接スタートトランディションっていう関数が

Guest 17:48
リャフトからエクスポートされて、使えるようになりましたよ。っていう、そういう話なんですよね、なので、

Guest 17:53
ま、スタートトランジションという概念しては、実は完璧に新しいものではなかったんですけど。ただ、今回

Guest 18:02
のリアト18の発表にあたって、なんかリアクトチームがすごい。なんか、ドキュメンテーション頑張ってるじゃないですか、

Guest 18:10
なんか、そん中でこのスタートトランディションの説明を見ると、従来よりかなり分かりやすく明確に書かれてるなって印象がありまして。なんか、

Guest 18:20
昔のリアクトコンパレントモードのドキュメントで説明されていたやつを見ても、トランジションで結局なんなの。っていうことは、いまいちピンと来なかったんですよ。

Guest 18:30
でも、今回は公開された説明を見ると、トランジションっていうのは、まあ、優先度の低いステート更新だよって、めっちゃ明確に書かれていて、

Guest 18:39
んで、順も前々からこのユーズトランディションは理解していたつもりだったんですけど、今回説明を見て、ああ、改めて勉強になったなと思いましたね。

Guest 18:48
ふんふんふんなんかとらトランジションってあれですよね。こい、最初聞くとすごいあの、アニメーションのトランジションかみたいな。

Guest 18:58
はいはいはいはいそ、

Guest 18:59
そういう感じをしますね。

Guest 19:02
そうですね、なんか今となっては、なんかトランジションって名前がベストなのかどうかは正直わかんないんですけど、まあ、概念としては

Guest 19:11
ちょっとなんか完了するまで待たされるかもしれない。時間がかかるかもしれないっていう意味で、ちょっとアニメーションのトランディションとかかってるのかもしれないですね。

Guest 19:23
そうすね、優先度が低いと何が起こるかというと、なんか

Guest 19:30
なんかトランジションとして行われたステート更新に対して、こうまレンダリングは走るじゃないですか。関数コンポーネントを再レンダリングするとか。

Guest 19:38
でも、もしそういうことをしている最中に、なんかトランジションではない、優先度の高いステート更新が起こった場合、

Guest 19:46
なんか、そのトランジションのための仕事は一旦破棄されるんですよ。一旦やめて中断してというか、もう多分消しちゃうと思うんですけど、

Guest 19:55
それでトランジションじゃない。つまり、優先度が高いステート更新の処理の方に即座に移っていくと、

Guest 20:03
つまり、実際にステート更新が起こった順番に関わらず、まトランジションよりは、トランジションではない、ステート

Guest 20:11
の更新がま優先して、レンダリングされるというま、そういうある、そのスケジューリングっていうんですかね。

Guest 20:18
が、できるようになるっていうのが、このトランジションの意味だと思います。で、まさにこのなんか今やってる仕事を中断して、もっと優先度の高い

Guest 20:27
やつを先にやるってのが、多分、リアクトがずっと昔からやりたかったもので、このコンカレントレンダリングっていうのも、こういう

Guest 20:36
だから、今やってるのを中断できるっていうことを指してるはずなんですよ。だから、リアクトがコンカレントとか言い出した時点で、多分ゴールは

Guest 20:44
まひとまずのゴールはここにあったんですよね。つまり、優先度の低いステート更新という概念を作ってま、それの間で

Guest 20:53
こうスケジューリングできるようにする、これが、リアクトがずっとやりたかった1つのゴールなんだと思います。

Guest 20:59
なるほど、あの、結構なんかそこいっぱいステートがこうなんて言うんすかね。更新されたとしても、なんかこう裏ではなんかこう

Guest 21:10
なんよなにまとまっててでな。最終的になんかこうエフェクトとして実行されるのはなんか

Guest 21:17
なんていうか、ま、大体1回っていうのが前提になっているっていう感覚はあるんですよね。ただ、まあそれはうん、

Guest 21:25
あの、それをこう明治的にこう送らせるっていうことで、その優先度を下げるみたいな自体が求められるっていうところもあります。あの、そういうところが求める状況だと、まあ嬉しいですし、

Guest 21:38
まあ、あとはあれですよね。そのちゃんとそのすごいより、このリアクトの考えに近づいた感がありますよね。その、例えば、エフェクトがなんかこう

Guest 21:48
なんか依存したとして、それが何回起こるかとか、まあ、そういうところとかっていうのがま、今までだとこう。なんか、1回1回とか

Guest 21:56
なんか変更されたら

Guest 21:59
まとまって1回実行されるみたいなのは、なんとなく、そういう感覚はあったもののま、これからそういうなんかこう

Guest 22:07
優先度が色々こう決められるようになってくると、まあそのへん。あの、すごい何回も起こる可能性があるしま。それを前提にした

Guest 22:16
動きみたいなのが、どんどんこう求められてくる。あ、

Guest 22:20
そうですね、それはなんかとってもあると思います。

Guest 22:24
それ、なんか、さっきちょっと言ったま。レンダリングを中断できるっていう仕組みが導入されたことによって、

Guest 22:31
ま。逆に言うと、ちょっと重い。レンダリングでも、ポンポンポンポンと、まあ、発酵できるようになってきたんですよね。

Guest 22:38
それはなぜかというと、そういうのをま、優先度が低いとマークしてることによって、ちょっと贅沢して、重いレンダリングを走らしたとしても、ちゃんと

Guest 22:47
もっと重要な即座に画面に反映すべき優先度の高いものはまリアよ。なに

Guest 22:53
ちゃんと優先度を高めて反映して、uxを落とさないでくれるっていう。もっと気軽にレンダリングをポンポン走らせられるようになったかなって印象はあります。

Guest 23:03
確か、リアクトがうん、トランディションの例として、なんかちっちゃい。

Guest 23:09
なんか、検索欄みたいなコードサンプル出してましたけど、ちょうどそこで、そういうなんか、気軽に重めのレンダリングをポンポン走らしていくみたいな、

Guest 23:18
そういう考え方のコードになっていたと思います。

Guest 23:22
あれですよね、なんかそういう時って大体私すごいありがちなのは、その遊説ェクトの中で

Guest 23:30
こうなんですか。あの、あ、あの、無縁のアシンク関数作ったりとか、そういう感じで。なんかまあまあそれで

Guest 23:39
いいっちゃいいんですけど、それって、あのそらそれがあの、今回のまスタートトランジションで囲ってあげるだけで、ま。どれだけ重い処理がその中であっても、

Guest 23:50
なんか優先度下げて実行してくれみたいな

Guest 23:54
ま、まさにそうだと思います。

Guest 23:57
なんか、そう、リアトのqアンドウェイで、そうなんか、ちょっと。なんかそれこそセットタイムアウトとか、遊説フェスで送らしちゃダメなの。みたいな。そういう気は確かあったと思うんですけど、

Guest 24:08
確かリアトの答えはなんかそれは無駄に遅れるよみたいなことが1つで、というのも、いくらトランジションで、優先度が低かったとしても、

Guest 24:17
他に仕事がやることがなければ、リアクトは即座にま、レンダリング始めてくれるわけですよ。だから、

Guest 24:24
本来優先度が低いからといって、無駄に送らせる必要がなかったんですよね。あ、そのなんか昔存在していた無駄っていうのを、ちゃんと

Guest 24:33
トランジションっていう風に表現しておくことで、その無駄がなく、ベストな仕組みで、かつuxも担保できる。そういうところは、ゴールだったのかなって思いま

Guest 24:44
はあ、なるほど、なるほどね、なんかもう絶対タイムアウトとか、もう、そんなブラウザの持ってるやつよりも、リアに任せてしまった方が早いという自信が

Guest 24:54
あるという。

Guest 24:55
そうですね。そうです、そうですね、

Guest 24:58
いや、すごいなで、あと、最後にもう1つ。

5. StrictModeでのuseEffectの挙動 25:03

Guest 25:06
あのまあ変更点変更点っていうか、まあこう気を付けなければいけない点みたいなのが挙げられていまして。ま

Guest 25:13
あ、あと1つストリックトモードでの遊説、フェクトの挙動の変化っていうところが、さんが上げていました。じゃあ、ここもう少し

Guest 25:22
見てるっていうのはよろしいでしょうか。

Guest 25:25
あ、これをまたtwitterで結構話題になってましたよねえ、遊説フェクトの動作変わるのみたいなああ、はいはい、

Guest 25:33
しかも確か結構衝撃的な書かれ方をしていて、というのも、遊説フェクトでよく第2引きそうにかの配列渡したりするじゃない。はいですか。

Guest 25:42
そしたら、もう、リアクトがマウントされた時に1回だけ走りますっていうのが従来の挙動だったんですけど、

Guest 25:49
なんとリアクト18両はそれが崩れてしまいますよ。という発表がされていて、まあ、最初は

Guest 25:57
ストリクトモードの中だけなんですけど、こうコンポレントがマウントされた時に、遊説フェクトのマウントエフェクト、つまり、最初の

Guest 26:08
まあ、なんでしたっけ。エフェクトが即座に走って、なんかそのあとわざとあそこにアンマウンドにエフェクトをもう1回走らされてしまうという

Guest 26:18
のが最大。今回、このストリヒトモードで起こる遊説、フェクトの共同の変化ですね。1回マウントをしたと思ったら、即座に

Guest 26:26
アンマウントされてしまうんですよ。ま、あ、くまで遊説フェクトだけに限った話ですけど。で、そのあともう1回マウントされて

Guest 26:35
終了みたいな。つまり、従来コンポーネントがマウントされた時は、遊説フェクトのマウントが1回走って終わりだったんですけど、

Guest 26:45
スリフトボードでは、わざとマウントアンマウントマウントって、余計に処理が走っちゃうんですよね。これによりま1回コンポントマウントしたら、

Guest 26:54
なんかたとえ第2引数をかの配列にしたとして、も、まマウントアンマウントマウントっていう風に、マウントが結局2回走っちゃう

Guest 27:03
ていうのが、まあひと一言でもないですけど、今回、ストリクトモードに対して、有説フェクトで起こった変更ですね。だから、例えば、

Guest 27:13
なんかこのコンポーネントが表示された時に、なんかイベント発火して、トラッキングします。みたいなことをしてる時は、意外と問題になりやすいパターンで、

Guest 27:22
そういうことをしてるときは、1回のコンポーネントがマウントされたら、トランキングは2回送られちゃうわけですよね。

Guest 27:29
そうですよね、

Guest 27:31
そうなんですよ、だから、そういう意味で結構これはまあおっきな変更かなという風に思います。

Guest 27:40
これはあれですよね、あの、わ、わざとそうしてるんですよね、すごいあの気をき、気が付くための

Guest 27:50
あ、それはもちろんそうですね。リアクトのストリクトモードっていうのが、なんか、変なコンポーネントというか、正しくないコンポーネントあり出すためのもので、

Guest 28:00
あ、ストリフトモードの中に書かれたコンポーネントだけ、わざとこう変な挙動が起こされるんですよね。あ、もちろんこれは開発環境だけで、プロダクションでは、

Guest 28:09
ストリクトモードに囲っておいても、何も怒らないんですけど、なんかリアクト18より前からあったストリクトモードの動作だと、関数コンポーネントが

Guest 28:18
わざわざ関数2回呼ばれて、1回は無視されるみたいな、そんな挙動がスリフトモードであったと思って、これもちょうどコンカレントモードで、

Guest 28:28
なんか関数レンダリングしようと思って呼びだし、関数呼び出したけど、やっぱやめたいみたいなことが実際に起こり得る。だから、そのための布石として、昔から

Guest 28:37
ストリクトモードに感想に通うっていう挙動があったわけなんですけど。なので、今回リアクト18で、このストリクトモードの中で、遊説フェストの挙動が変わるっていうのも、

Guest 28:47
同じように、将来の布石だと思ってもらって大丈夫です。つまり、いくらストリフトモードの中で、

Guest 28:53
なんかユーフェクトの中でマウントが2回走っちゃうよ。みたいなことがあったとしても、じゃあ、リアクト18にアプデートしたからといって、プロダクトで実際にそういうシチュエーションが

Guest 29:03
怒るかというと、ま、今のところは多分リアクト18.0の段階では起こらないはずです。そうなんですよ、

Guest 29:11
じゃあ、なんでこんな変更する人モードに入れたかって言うと、やっぱ将来の席で

Guest 29:16
あ、確か一応具体例が1つ書いてあって、それがオス。オフスクリーンエpiって呼ばれてるものなんですけど、コンポーネントが

Guest 29:25
マウントされた状態で、アンマアウトされたわけじゃないんだけど、画面から隠れてますよ。っていうことみたい、はいはいはいはいはい、

Guest 29:34
状態をま宣言できるようになるってのは、この新しい将来的にリアクト18.何ぼかで導入される

Guest 29:42
予定のオフスクリーンAPIなんですけど、なんか、リアクトチームの意図としては、このコンポーネントがマウントされて

Guest 29:51
はいるけど、画面に表示されてない、隠されてますって時は、なんか遊説フェスト的には、アンマウントの状態として扱いたいらしいんですよね。

Guest 30:00
そうなんですね、

Guest 30:01
そ、そうなんすよ、コンポーネントが実際にアンマウントされたわけじゃないんだけど、遊説フィフトから見ると、アンマウントされてる状態みたいな。

Guest 30:11
なんでこその結果、コンポーネントワンマントされないけど、遊説フェクトのアンマウントだけ走りました。みたいなことが、

Guest 30:19
あ、この新しいオフスクリーンAPIってのを使うと、実際に怒り始めるんですよ。

Guest 30:24
ああ、そうなんですね、

Guest 30:27
そういうコンポーネントは、再び非表示がなくなって、画面に表示されることがあって、

Guest 30:32
そしたらま同じコ包店ト内で、2回目のマウントエフェクトが走るわけですね。実際に

Guest 30:39
ま、確かにリニはかってはいますね。なんか、それているものだけマウントうんで、

Guest 30:47
はい、だから、これが実際まあ、ある意味リアクト18での結構大きいブレーキングチェンジだなと思っていて、

Guest 30:56
なんか実際に挙動が変わるというよりは、遊説フェクトの意味がこう。なんか再定義されたというか、

Guest 31:02
なんか遊説フェクトってのはこういうことなんですよ。っていうのを、リアクト18で、ちょっと変えてきたんですよね。リアクトチームが

Guest 31:11
そう、完全にコンポーネントのマウントアンマウントっていうライフサイクルに紐づいたものではなくて、

Guest 31:18
遊説フェクトってのは、あくまでコンポレントが表示されてる時のための、まあ、エフェクトなんですよ。というような、そういう風に遊説フェクトの意味が

Guest 31:27
再定義されたっていう風に理解するのはいいと思います。

Guest 31:32
なるほど、あのさっきのあれですよね、コンカレントもり、コンカレントレンダリングやったりとか。ま、あと、その

Guest 31:42
優先度の話とかもあったし、あありましたし、結構まあほんとに自身のあれですよね。そう

Guest 31:50
ちゃんとどんどんなステートでも、ちゃんと正しく動くっていうことが、今改めて求められたいっていう

Guest 31:59
感じですよね。そう、リアクトっぽいですよ。

Guest 32:02
ですよね、そうなんです、やっぱこのなんか俺たちについてこいみたいな。こういうやり方は、個人的にはとても好きですね。

Guest 32:11
なんか、ここまで頑張って説明して。でも、まあ、リアクトはリアクトチーム的には、

Guest 32:18
このなんか考え方を我々に変えてほしいんですよね。これ、遊説フェフトってのはこういうもんなんだよとか、

Guest 32:27
なんか、そこをこんだこれだけ頑張るって選択をして、でも、まあ、ちゃんと理想的な方向にま。リアクト、あるいは、リアクトのエコシステムを持っていこうっていう。

Guest 32:38
なんか意思というか、着がというかを感じて。なので、リアクト18の説明を見た時は、リアクトチームってやっぱりすごいなって思いました。

Guest 32:46
うん、すごいです、確かにちゃんとあれですよね、こうなんか、破壊的変更する代わりに、ちゃんとその

Guest 32:56
すごいサスペンスの仕組みがまた入ってきたりとか。っていうところは、まあ、すごいなんて言うんですか。上げるための

Guest 33:05
こう、痛みもあるけれども、全然それをにこう見解があるみたいなところがすごいし、

Guest 33:13
そうなんですよ、

Guest 33:14
感じますね。うん、

Guest 33:16
そうなんですよ、結構twitterとかで反応見てると、これはやりすぎなんじゃね。みたいとか、こんなのもうついついていけねえよとかわかんねえよっていう反応も

Guest 33:24
まちらほら、ミラーレーはするんですけど。でも、個人的には意外とみんなちゃんとついてくるんじゃないかなって思っていて、

Guest 33:32
というのは、そもそも。今、フロントエンドって、ある程度の規模の

Guest 33:36
アプリはなんだかんだで、かなり制限iがもう対当したというか、支配しちゃったじゃないですか。だから、

Guest 33:42
なんだかんだでま宣言はっていうのは、最初はかなり難しい概念だったと思うんですけど、なんだかんだで。フロントエンドエンジニアがこうついてきてるんで、

Guest 33:52
まあ、リアクターがこうやって、また新しい概念って言うんですかね。考え方を入れようとしても、ま、最終的にはちゃんと。

Guest 34:00
もちろん、リアスはこの調子で。まあ、成功していけばではありますけど、最終的にはちゃんと受け入れられるんじゃないかなっていう風に、

Guest 34:08
個人的には、ちょっと楽観的にこの辺りは思ってます。

Guest 34:14
あれですね、ちゃんとすごい私たちは試されてますよね、ちゃんとついてくること。

Guest 34:22
そうですね、だから、私としても、だから、皆さんが我々がみんなでついていけるように、情報発信とか、やっぱしていきたいなとはちょっと

Guest 34:31
思いました。なので、まさにこのutインサイドのこのリアクト18回なんかもそうで、これを聞いてる皆さんが、

Guest 34:39
リアクト18に対する理解をちょっとでも深めてもらえたら、まあ、我々としては大変嬉しいですよね。

Guest 34:45
そうですね、というか、まあ私もここれを聞いて勉強します。

Guest 34:53
まあ、あのまあ改めて言いますけど、これはまだアルファンなので、まあ、勉強する時間自体は全然ありますよね。数か月少なくともあるということなんで。

Guest 35:04
そうですね。そうですね、しかも、元々このアルファバンって、なんかライブラリ作者向けみたいな位置付けで、一応出されてるんですよね。

Guest 35:11
はいはい、

Guest 35:13
というのも、結構こうやって、いろんなリアクトの新機能とか見てきましたけど、なんか、我々が直接使うというよりは、ライブラリーの中で使われるみたいな機能も

Guest 35:22
まちらほらあるような気が。ちょっとしてるんですよ。はい、特にさっき話に出たトランジションなんて、

Guest 35:30
なんか、リアスト的には、もう一部の例外を除いたほぼすべての生徒管理が、トランジションにマークしてあげたいくらいの勢いらしいんですけど。

Guest 35:40
でも、さすがに後方線の五感から、トランジションをデフォルトにすることができなかったらしくて、ちょっとこれはちょっと予測というか、推測ですけど、

Guest 35:50
なんかリアット的にはこう。新しいステート化にライバイとしても、デフォルトがトランジションになってるようなで、トランディションじゃないものをプトアウトできるような、

Guest 35:59
そういう感じのステート管理ライブが出ることをちょっと期待してるんじゃないかなっていう。ほんとにただの推測ですけど、

Guest 36:07
そういう気はちょっとしています。

Guest 36:09
確かに、なんかリコイルはすごいいいですよね。そのファン、あのフックがちゃんとあの普及普及してから、ああいうhaがせた

Guest 36:19
ので。ええ、まあ、今回もそういう。まあ、トランジション

Guest 36:25
でこうスタートトランジションで、こうラップするっていうところがこううん

Guest 36:32
ま、具体的にどどういう感じになるのかは全然想像つきませんけど。

Guest 36:36
そうですね、まだこうリアクトの進化が、ただ書き方を変えるだけじゃなくて、ライブラリの進化もちゃんと先導する形になってるのが、

Guest 36:44
個人的にはすごくいいなと思ったところですね。あと、それで言うともう1つだけあって、そうなんか、

Guest 36:52
リアクトで、なんかキャッシュっていう名前のコンポーネントが、エクスペリメンタルのものとして作られたらしくて、これもリアクト18に入る気がするんですけど、

Guest 37:02
なんかざっくり言うと、まリアクト本体の中にこう。なんか、エピア呼び出しの結果とかをキャッシュできるような

Guest 37:09
キャッシュするのをサポートできるような仕組みが導入される予定らしくて。っていうのを聞くと、え、何。それって自分は思ったんですけど、

Guest 37:17
よくよく見ると、我々が直接リア島の内部にある脚手を叩いて、なんかキャシを更新するとか、そういうことをするわけじゃなくて、どっちかって言うと、

Guest 37:26
なんか今使われてる。なんか、データフェッチングのライブやり、なんかswrとかですね。あの辺のキスの内部実装として使われること

Guest 37:36
が想定されているっぽい、そういう新機能も、実はリアクト18に入るらしいんですよね、

Guest 37:44
なんか、あれみたいですよね、コンテキストみたいですよ。

Guest 37:48
あ、そうですね、なんか、コンテキストのなんか、もうちょっとキャッシュオに特化した版みたいな、そういう印象でした。そうなんか、そういうのも密かに入るらしくて、

Guest 37:58
ま。多分、その辺我々が直接触ることはあんまりなくて、多分ライブラリー系より触られると思うんですけど。ま、そういう風に

Guest 38:06
ま、エコシステムもちゃんと理想的な形に持っていこうとするリアクト本体でやった方がいい部分は、ちゃんとリアクト本体に取り込むというか、

Guest 38:16
そういうのも、このリアクト18の発表からは見えてきましたね。

Guest 38:23
ま、キャッシュはまだあれですね。こう徐々に。まあ、もしかしたらこう広がっているのかもしれないですね。あのま、

Guest 38:31
基本そのコンテキストとかも元々そのライブラリオートみたいな感じだったと思う。

Guest 38:36
あ、確かにそうですね、なんか、ライブがちょっとつかめてみて、あ、これは便利だっていう風になったら、だんだんこう我々が直接使えるような、一般向けの

Guest 38:46
ものも、何か発展してくるかもしれなくて、確かにそうなったら、とても楽しみですね。

Guest 38:51
そう考えるとあれですよね、こうし、リアクトリの導入の仕方ですね。すごい。

Guest 38:57
確かに

Guest 38:58
うん、いや、めちゃくちゃ密度の高い話でしたね。

Guest 39:07
では、今回は先日発表された薬と、18アルファについて、お医者さんに聞いてみました。

6. クロージング 39:08

Guest 39:14
ラインのフロントエンド組織UITでは、このような技術的なキャッチアップを日々行っております。

Guest 39:20
UIT以外にも、毎週の社内勉強会でロイドの情報交換を行ってい、

Guest 39:26
今後もUITミサイルを通して、このような情報を外部に発信していけたらと思います。

Guest 39:33
最後に、現在、LINE株式会社では、インターン中途採用ともに大募集しています。

Guest 39:39
このポッドキャストを聞いて、第に興味を持たれましたら、小のと1番下にある巨人ページから、ぜひアクセスしてください。それではさんありがとうございました、

Guest 39:48
ありがとうございました。