Day6

本日も記事を見てくださりありがとうございます！
最近桜がきれいに咲いているだけあって季節が春になったとしみじみ感じますね🌸
自分の家の近くでも今朝桜が満開になっていてとてもきれいだなと感じました。
一年中咲いているというわけではないと思うので今の季節を楽しみたいです。
人生一度きりですから。
参考サイトはこちらから。

React Ver18

さて、ここからが本日の本題になると思います。
Reactの公式ブログに記事が投稿されているのですが(2022年4月6日　現在)やはり英語版だけになっています。
こういう時に英語ができると最新のトレンドを逐一キャッチアップできると思うのでやはり英語できると恩恵すごいです。。。
※この記事に関して自分の英語への未熟度合いの影響もあり間違った内容になっているかもしれません。もし何か問題がありそうでしたら教えていただけると幸いです。

インストールについて

以下のコマンドでできるそうです！
どうやらインストール時に@rcタグが必要そうです！

npm $ npm install react@rc react-dom@rc
or
yarn $ yarn add react@rc react-dom@rc

APIの刷新(クライアント側)

大前提としてReactDOM.renderがサポートされが終了しました。
その代わりに新しくcreateRootというAPIが提供されるようになりました！！
その関係で他のAPIでも影響を与えている部分があり、

// Before
unmountComponentAtNode(container);

// After
root.unmount();

のように変更になりました。

UnmountComponentAtNode

DOM からマウントされた React コンポーネントを削除し、イベントハンドラや state をクリーンアップします。コンテナにコンポーネントがマウントされていない場合、このメソッドを呼び出しても何も行いません。コンポーネントがアンマウントされた場合は true を返し、アンマウントすべきコンポーネントが存在しなかった場合は false を返します。

次にSuspenseが使用されるにあたり、renderのコールバックを削除されるようになります。
詳しくはこちらから！

// Before
const container = document.getElementById('app');
ReactDOM.render(<App tab="home" />, container, () => {
  console.log('rendered');
});

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

  return <App tab="home" />
}

const container = document.getElementById('app');
const root = ReactDOM.createRoot(container);
root.render(<AppWithCallbackAfterRender />);

最後に、もし現在のアプリが、 hydration でサーバーサイドレンダリングを使用する場合、hydrate を hydrateRoot にアップグレードしてください。
詳しくはこちらから！

// Before
import { hydrate } from 'react-dom';
const container = document.getElementById('app');
hydrate(<App tab="home" />, container);

// After
import { hydrateRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = hydrateRoot(container, <App tab="home" />);
// Unlike with createRoot, you don't need a separate root.render() call here.

APIの刷新(サーバー側)

詳しくはこちらからAPI部分に飛べます！
サーバー側ではrenderDOM/server APIが新しくなり、Suspension on the serverとStreaming SSRを完全サポートされるようになりました😍
そして、renderToNodeStreamが非推奨となっております。

• renderToPipeableStream
• renderToReadableStream

また、renderToStringとrenderToStaticMarkupに関しては制限があります！（詳しくはドキュメントに記載があります）

Automatic Batching

これが自分の中で一番注目してる変更になります。（あまり知らないからそう言える）
この機能について、
今までより多くのバッチ処理を行うことでReactが複数のステートの更新を１回の再レンダリングにまとめ、パフォーマンスを向上させるといった機能になります。
今までは、Reactのイベントハンドラー内のバッチ処理をするだけで、Promiseやその他のイベントの内部の更新はデフォルトだとされない仕様になっていました。

// React 18以前はReactのイベントのみがバッチ処理されていました。

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

setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
  // 状態の更新ごとに 2 回レンダリングする
}, 1000);

のようになっていました。
18からはcreateRootから全ての更新はどこからきたかに関係なく自動的にバッチ処理が走るようになっています！
なお、自動バッチ処理を行わないようにするには、flushSyncを使用すれば大丈夫です◎
詳しくはこちら！

感想

※今回ご紹介したのは、ほんの一部です。もっと知りたい方は、公式ドキュメントをお読みください🌀。
私自身、もともと英語学習の一環としてやっていたのですが、いざ翻訳するとなると、うまくできなかったり、迷ったりすることがありました。
また、エンジニアとして成長しても、今はいろいろと便利な翻訳サービスがあっても、英語から他の言語に翻訳するのは難しいと感じています。
世界中の人とつながることができるという点では、英語に勝るものはありませんし、世界には英語のサイトが相当数あると思います。
この考えをモチベーションに、これからも頑張っていきたいと思っています。
また、いつかカンファレンスで発表されたブログを読めるような人間になりたいと思います。
そして、いろいろな人の意見を受け入れて、面白いサービスにしていきたいと思います。

英語版ログ

プログラミングに使われるような英語は変な意味っていうあるある♪
seems -> (…と)見える,見える,思われる,らしい,(…が)ありそうに思える
looks like -> …のように見える,…に似ている,look likeの三人称単数現在
lately -> 最近,近ごろ
guess -> (当て推量で)(…を)言い当てる,解き当てる,(十分知らないで, また十分考えないで)推測する,(…を)推測する
brings -> (ある場所へ)持ってくる,連れてくる,bringの三人称単数現在
Apparently -> (実際はともかく)見たところでは(…らしい),どうも,明白に
We've -> we have の短縮形
affected -> 影響を受けた,(病気などに)冒された,(好悪などの)感情を抱いて,気取った,きざな
premise -> (推理を行なう時の結論の基礎となる)前提,根拠,前提,(土地・付属物付きの)家屋
hydrate -> 水和物,水化物,(…を)水和させる,水酸化させる,水和する,水酸化する
Suspense -> (精神的に)宙ぶらりんの状態,あやふや,どっちつかず,不安,気がかり
restrictions -> 制限,限定,制約,restrictionの複数形
regarding -> …に関して(は),…の点では
combine -> combine(…を)結合する,合併させる,連合する,結びつける,合同させる
internals -> 内部詳細
even -> …でさえ(も),…すら,(それどころか)いやまったく,いっそう,なお
convenient -> 手ごろな,手近で,近くて,都合がよくて,重宝で
significant -> 重要な,意義深い,意味ありげな,意味深長な
amount of -> 総計,総額,要旨,意義