<h1 id="h104724ab2d">Day6</h1>本日も記事を見てくださりありがとうございます！ 最近桜がきれいに咲いているだけあって季節が春になったとしみじみ感じますね🌸 自分の家の近くでも今朝桜が満開になっていてとてもきれいだなと感じました。 一年中咲いているというわけではないと思うので今の季節を楽しみたいです。 人生一度きりですから。 <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html" target="_blank" rel="noopener noreferrer">参考サイトはこちらから。</a><h2 id="h9543da437c">React Ver18</h2>さて、ここからが本日の本題になると思います。 Reactの公式ブログに記事が投稿されているのですが(2022年4月6日　現在)やはり英語版だけになっています。 こういう時に英語ができると最新のトレンドを逐一キャッチアップできると思うのでやはり英語できると恩恵すごいです。。。 ※この記事に関して自分の英語への未熟度合いの影響もあり間違った内容になっているかもしれません。もし何か問題がありそうでしたら教えていただけると幸いです。<h3 id="h875035df4a">インストールについて</h3>以下のコマンドでできるそうです！ どうやらインストール時に@rcタグが必要そうです！<pre><code>npm $ npm install react@rc react-dom@rc
or
yarn $ yarn add react@rc react-dom@rc</code></pre><h3 id="ha7d0adb2c5">APIの刷新(クライアント側)</h3>大前提としてReactDOM.renderがサポートされが終了しました。 その代わりに新しくcreateRootというAPIが提供されるようになりました！！ その関係で他のAPIでも影響を与えている部分があり、<pre><code>// Before
unmountComponentAtNode(container);

// After
root.unmount();</code></pre>のように変更になりました。<h5 id="hea965824bf">UnmountComponentAtNode</h5><blockquote>DOM からマウントされた React コンポーネントを削除し、イベントハンドラや state をクリーンアップします。コンテナにコンポーネントがマウントされていない場合、このメソッドを呼び出しても何も行いません。コンポーネントがアンマウントされた場合は&nbsp;<code>true</code>&nbsp;を返し、アンマウントすべきコンポーネントが存在しなかった場合は&nbsp;<code>false</code>&nbsp;を返します。</blockquote>次にSuspenseが使用されるにあたり、renderのコールバックを削除されるようになります。 <a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">詳しくはこちらから！</a><pre><code>// Before
const container = document.getElementById('app');
ReactDOM.render(&lt;App tab="home" /&gt;, container, () =&gt; {
 console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
 useEffect(() =&gt; {
 console.log('rendered');
 });

 return &lt;App tab="home" /&gt;
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(&lt;AppWithCallbackAfterRender /&gt;);</code></pre>最後に、もし現在のアプリが、&nbsp;hydration でサーバーサイドレンダリングを使用する場合、hydrate を hydrateRoot にアップグレードしてください。 <a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">詳しくはこちらから！</a><pre><code>// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(&lt;App tab="home" /&gt;, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, &lt;App tab="home" /&gt;);
// Unlike with createRoot, you don't need a separate root.render() call here.</code></pre><h3 id="ha28e4c57d8">APIの刷新(サーバー側)</h3><a href="https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream" target="_blank" rel="noopener noreferrer">詳しくはこちらからAPI部分に飛べます！</a> サーバー側ではrenderDOM/server APIが新しくなり、Suspension on the serverとStreaming SSRを完全サポートされるようになりました😍 そして、renderToNodeStreamが非推奨となっております。<ul><li><a href="https://github.com/reactwg/react-18/discussions/37" target="_blank" rel="noopener noreferrer">renderToPipeableStream</a></li><li>r<a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" target="_blank" rel="noopener noreferrer">enderToReadableStream</a></li></ul>また、renderToStringとrenderToStaticMarkupに関しては制限があります！（詳しくはドキュメントに記載があります）<h2 id="h453dbb8b1f">Automatic Batching</h2>これが自分の中で一番注目してる変更になります。（あまり知らないからそう言える） この機能について、 今までより多くのバッチ処理を行うことでReactが複数のステートの更新を１回の再レンダリングにまとめ、パフォーマンスを向上させるといった機能になります。 今までは、Reactのイベントハンドラー内のバッチ処理をするだけで、Promiseやその他のイベントの内部の更新はデフォルトだとされない仕様になっていました。<pre><code>// React 18以前はReactのイベントのみがバッチ処理されていました。

function handleClick() {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 //　最後に一度だけ再レンダリングする
}

setTimeout(() =&gt; {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // 状態の更新ごとに 2 回レンダリングする
}, 1000);</code></pre>のようになっていました。 18からはcreateRootから全ての更新はどこからきたかに関係なく自動的にバッチ処理が走るようになっています！ なお、自動バッチ処理を行わないようにするには、flushSyncを使用すれば大丈夫です◎ <a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="noopener noreferrer">詳しくはこちら！</a><h2 id="h8d78e14043">感想</h2>※今回ご紹介したのは、ほんの一部です。もっと知りたい方は、公式ドキュメントをお読みください🌀。 私自身、もともと英語学習の一環としてやっていたのですが、いざ翻訳するとなると、うまくできなかったり、迷ったりすることがありました。 また、エンジニアとして成長しても、今はいろいろと便利な翻訳サービスがあっても、英語から他の言語に翻訳するのは難しいと感じています。 世界中の人とつながることができるという点では、英語に勝るものはありませんし、世界には英語のサイトが相当数あると思います。 この考えをモチベーションに、これからも頑張っていきたいと思っています。 また、いつかカンファレンスで発表されたブログを読めるような人間になりたいと思います。 そして、いろいろな人の意見を受け入れて、面白いサービスにしていきたいと思います。<h3 id="hb8c2aee1f1">英語版ログ</h3>プログラミングに使われるような英語は変な意味っていうあるある♪ seems -&gt; (…と)見える,見える,思われる,らしい,(…が)ありそうに思える looks like -&gt; …のように見える,…に似ている,look likeの三人称単数現在 lately -&gt; 最近,近ごろ guess -&gt; (当て推量で)(…を)言い当てる,解き当てる,(十分知らないで, また十分考えないで)推測する,(…を)推測する brings -&gt; (ある場所へ)持ってくる,連れてくる,bringの三人称単数現在 Apparently -&gt; (実際はともかく)見たところでは(…らしい),どうも,明白に We've -&gt; we have の短縮形 affected -&gt; 影響を受けた,(病気などに)冒された,(好悪などの)感情を抱いて,気取った,きざな premise -&gt; (推理を行なう時の結論の基礎となる)前提,根拠,前提,(土地・付属物付きの)家屋 hydrate -&gt; 水和物,水化物,(…を)水和させる,水酸化させる,水和する,水酸化する Suspense -&gt; (精神的に)宙ぶらりんの状態,あやふや,どっちつかず,不安,気がかり restrictions -&gt; 制限,限定,制約,restrictionの複数形 regarding -&gt; …に関して(は),…の点では combine -&gt; <a style="color:#534a42" href="https://ejje.weblio.jp/content/combine" target="_blank" rel="noopener noreferrer">combine</a>(…を)結合する,合併させる,連合する,結びつける,合同させる internals -&gt; 内部詳細 even -&gt; …でさえ(も),…すら,(それどころか)いやまったく,いっそう,なお convenient -&gt; 手ごろな,手近で,近くて,都合がよくて,重宝で significant -&gt; 重要な,意義深い,意味ありげな,意味深長な amount of -&gt; 総計,総額,要旨,意義

<h1 id="h104724ab2d">Day6</h1>Thanks for taking a look at my post today! The cherry blossoms have been blooming beautifully lately, and I feel that the season has turned into spring.🌸 Even near my own house, the cherry blossoms were in full bloom this morning and I found it very beautiful. I want to enjoy season because I don't think they are in bloom all year round. You only live once. <a href="https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html" target="_blank" rel="noopener noreferrer">Click here to visit the reference site</a><h2 id="h9543da437c">React Ver18</h2>Well, I guess this brings us to the main topic of today's discussion. There is an article posted on the official React blog(as of April 6, 2022), but it is still only in English. I think it's a great benefit to be able to speak English so that you can keep up with the latest trends... ※ I am not sure if my inexperience with the English language is the reason for the error in this article. I would appreciate it if you could let me know if there are any problems.<h3 id="h5a197ad93a">About Installation</h3>They say the following command will do it! Apparently you need the @rc tag when you install!<pre><code>npm $ npm install react@rc react-dom@rc
or
yarn $ yarn add react@rc react-dom@rc</code></pre><h3 id="h9fb6563d4c">API renewal (client side)</h3>The basic premise is that ReactDOM.render is no longer supported. Instead, a new API called createRoot is provided! Because of this, there are some other APIs that are also affected.<pre><code>// Before
unmountComponentAtNode(container);

// After
root.unmount();</code></pre>The change was made as shown in the following table.<h5 id="hea965824bf">UnmountComponentAtNode</h5><blockquote>Remove a mounted React component from the DOM and clean up its event handlers and state. If no component was mounted in the container, calling this function does nothing. Returns&nbsp;<code>true</code>&nbsp;if a component was unmounted and&nbsp;<code>false</code>&nbsp;if there was no component to unmount.</blockquote>The next time Suspense is used, the render callback is removed. <a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">For more information, click here!</a><pre><code>// Before
const container = document.getElementById('app');
ReactDOM.render(&lt;App tab="home" /&gt;, container, () =&gt; {
 console.log('rendered');
});

// After
function AppWithCallbackAfterRender() {
 useEffect(() =&gt; {
 console.log('rendered');
 });

 return &lt;App tab="home" /&gt;
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(&lt;AppWithCallbackAfterRender /&gt;);</code></pre>Finally, if your current app uses server-side rendering in hydration, upgrade hydrate to hydrateRoot. <a href="https://github.com/reactwg/react-18/discussions/5" target="_blank" rel="noopener noreferrer">For more information, click here!</a><pre><code>// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(&lt;App tab="home" /&gt;, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, &lt;App tab="home" /&gt;);
// Unlike with createRoot, you don't need a separate root.render() call here.</code></pre><h3 id="h57ca736b30">API renewal (server side)</h3><a href="https://reactjs.org/docs/react-dom-server.html#rendertopipeablestream" target="_blank" rel="noopener noreferrer">You can jump to the API section here for more details!</a> On the server side, the renderDOM/server API has been updated to fully support Suspension on the server and Streaming SSR.😍 And renderToNodeStream has been deprecated.<ul><li><a href="https://github.com/reactwg/react-18/discussions/37" target="_blank" rel="noopener noreferrer">renderToPipeableStream</a></li><li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream" target="_blank" rel="noopener noreferrer">renderToReadableStream</a></li></ul>Also, there are restrictions regarding renderToString and renderToStaticMarkup! (More details can be found in the documentation)<h2 id="h453dbb8b1f">Automatic Batching</h2>This will be the change I am most interested in. (I can say that because I don't know much about it) As for this feature. This will be a feature that will allow React to combine multiple state updates into a single re-rendering by doing more batch processing than before, thus improving performance. Up until now, React has only done batch processing in its event handlers, and by default does not update Promise or other event internals.<pre><code>// Before React 18 only React events were batched

function handleClick() {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // React will only re-render once at the end (that's batching!)
}

setTimeout(() =&gt; {
 setCount(c =&gt; c + 1);
 setFlag(f =&gt; !f);
 // React will render twice, once for each state update (no batching)
}, 1000);</code></pre>was like the following. Starting with 18, all updates from createRoot will automatically run in batches, regardless of where they came from! To prevent automatic batch processing, just use flushSync. <a href="https://github.com/reactwg/react-18/discussions/21" target="_blank" rel="noopener noreferrer">For more information, click here!</a><h2 id="h458e0d0ba6">Impressions</h2>※This is only a small part of what we have covered. If you would like to know more, please read the official documentation.🌀 I myself originally did this as part of my English learning, but when it came time to translate, I found myself unable to do it well or feeling lost. Also, even as I grow as an engineer, even with the various convenient translation services available nowadays, I still find it difficult to translate from English to other languages. In terms of being able to connect with people around the world, nothing beats English, and I believe that there are a significant amount of sites in the world that are in English. I will continue to work hard with this idea as motivation. I also hope to one day become someone who can read blogs released at conferences. And I will accept various people's opinions and make the service interesting.

おはようございます！⛅
本日はいつも一日の終わりに書いているのですが本日は厳しそうなので朝に書いています。
昨日の日記通りの朝に起きて少し散歩を朝からしました。
今日のほうが若干曇ってはいますが過ごしやすいよう日になりそうですね！
本日は朝ということでまだ何もやってないので最近気になっていたトレンドについて書こうと思います。

勉強がてらにReact ver18への乗り換え翻訳。　Day6

Translation of the transfer to React ver18 for study purposes. Day6

（この記事で誤った情報などがありましたら報告いただけると幸いです🙇‍♂️）
※ Dockerで簡単に環境構築することができるハンズオンになっています！！
最近自分自身フロントエンドの勉強を中心にしています。
しかし、いまだにreduxはおろか簡単なstateの部分しか理解することができていません。。。。
以前、サービスを作った際にバケツリレーになってしまったことがあって
もうあんな思いはしたくないと考えているので今回は最近注目しているFacebook（Meta）が開発している
「Recoil」という状態管理ライブラリを自分で学習しつつハンズオンを試してみようと思います。

Souta Tech Blog.

技術キャッチアップ関連日記 Vol.1

勉強がてらにReact ver18への乗り換え翻訳。　Day6

Next.js × TypeScript × Recoil での状態管理を学ぶためのハンズオン

Souta Tech Blog.

勉強がてらにReact ver18への乗り換え翻訳。 Day6

Next.js × TypeScript × Recoil での状態管理を学ぶためのハンズオン

勉強がてらにReact ver18への乗り換え翻訳。　Day6