They made React great again?

Summary

The React team has introduced a new compiler to simplify code and improve performance. Features like useMemo and forwardRef will no longer be needed. Additional hooks provide optimistic UI updates and easier promise handling. These changes promise huge improvements for React, leading to similar abstractions across frameworks, perhaps eventually standardizing on a single true framework.

Takeaways

• 😀 Reactチームがコンパイラを開発し、開発者体験を劇的に向上させた。
• 🚀 jQueryがバージョン4.0を発表し、時代遅れになった機能を削除し、ESモジュールに移行した。
• 🔧 Reactの新しいコンパイラは、InstagramでのMetaの実用例を通じて、パフォーマンスの向上が期待される。
• 📚 useMemoやuseCallbackのようなフックが不要になり、コードがシンプルになる。
• 👀 他のフレームワークと比較して、Reactはこれまでランタイムベースだったが、コンパイラの導入により競争力を高めた。
• 🔄 forwardRefの必要性がなくなり、refをプロップとして直接アクセスできるようになる。
• 🌐 サーバーアクションを通じて、クライアントとサーバー間のデータ送受信が簡単になる。
• ⚡ useフックを使うことで、プロミスの解決値をUI内で直接使用できるようになり、よりダイナミックな体験を提供する。
• 💡 すべての主要なJavaScriptフレームワークが互いに機能をコピーし合い、ほとんど同じAPIになりつつある。
• 🤔 最終的には、一つの真のフレームワークを決定し、ブラウザに組み込むことで、開発者間の争いを終わらせるべきだと提案。

Q & A

What major change was announced by the React team?

The React team announced a new compiler for React that will simplify code and improve performance.

How will the new React compiler affect hooks like useMemo?

Hooks like useMemo will no longer be needed because the compiler will handle reactivity automatically.

What is happening with forwardRefs in future React versions?

Instead of needing forwardRefs to expose DOM nodes, refs will just be a regular prop.

How do server actions aim to improve the form submission process?

Server actions handle the entire cycle from client to server and back, providing hooks to easily manage form state and optimistic updates.

Why is using promises difficult in React currently?

Promises can't be used directly in client components. The use hook makes working with promises easier.

How does the use hook compare to useContext?

The use hook works for both promises and context, and can be used in more cases than useContext.

What similarities are emerging between frameworks?

The major frameworks are converging on similar abstractions and APIs.

When will jQuery 4.0 be released?

jQuery 4.0 was released in February 2024 after nearly 10 years of anticipation.

What changes come with jQuery 4.0?

jQuery 4.0 removes obsolete features, drops IE11 support, migrates to ES modules.

Why don't many developers use jQuery anymore?

Many modern developers feel jQuery is outdated and prefer to use other frameworks like React and Vue.

Outlines

00:00

🚀 Reactの革新とフレームワークの未来

Reactチームが開発者体験を劇的に改善するための新しいコンパイラを発表したことが話題になっています。この動きはReactが単なる過去の遺産ではなく、依然としてフロントエンド開発の先端を行く存在であることを示しています。この変更により、Reactは他のフレームワークと同様に、コードを事前に解析し最適化するコンパイラを持つことになります。これは、開発者がより簡単に、そして効率的にコードを書くことを可能にし、特に`useMemo`や`useCallback`などのフックの使用を過去のものにします。また、jQueryのバージョン4.0のリリースも触れられており、これが今でも多くのウェブサイトにとって重要なニュースであることが強調されています。Reactにおける今後の改善点として、`forwardRef`の簡素化やサーバーアクションの導入、そしてプロミスとコンテキストを扱う新しい方法が紹介されており、これら全てがReactの開発体験を向上させることを目指しています。さらに、これらの変更はReactを他のフレームワークとより似たものにしており、最終的にはフレームワーク間の差異が縮小していることを示唆しています。

Keywords

💡React

ReactはFacebookによって開発されたJavaScriptライブラリで、ユーザーインターフェイスの構築に使用されます。このビデオスクリプトでは、Reactチームが開発者体験を大幅に向上させるコンパイラを導入したと述べています。これはReactがこれまでに直面していた批判や開発者の課題を解決する重要なステップとして提示されています。

💡コンパイラ

コンパイラはソースコードをコンピューターが理解できる形式に変換するプログラムです。Reactの文脈では、この新しいコンパイラはReactコードを最適化し、実行時ではなくビルド時に多くの処理を行うことで、パフォーマンスを向上させると説明されています。

💡jQuery

jQueryはかつて非常に人気があったJavaScriptライブラリで、DOM操作やイベントハンドリングを簡単にします。スクリプトでは、jQueryのバージョン4.0が発表されたことが述べられており、これはJavaScript言語自体によって時代遅れになった機能を削除し、より現代的な開発スタイルに適応したアップデートとされています。

💡フレームワーク戦争

フレームワーク戦争は、開発者の間で最適なフロントエンド開発ツールを巡る議論を指します。ビデオでは、Reactが新しいコンパイラを導入することで、このような競争が終わりを迎えると思われた矢先に、再び技術革新の波を引き起こしたと言及されています。

💡開発者体験

開発者体験は、技術を使用する際の開発者の満足度や生産性を指します。Reactのコンパイラは、コードのシンプルさを向上させることで、開発者体験を大幅に改善することを目指しています。

💡useMemo

useMemoはReactのフックの一つで、不必要な計算を避けるために値のメモ化（計算結果の保存と再利用）を行います。スクリプトでは、これが新しいコンパイラによって不要になると述べられており、これはReactがより効率的でシンプルなコーディングスタイルを実現する大きなステップとされています。

💡forwardRef

forwardRefはReactで親コンポーネントが子コンポーネントのDOMノードにアクセスするために使用される高階コンポーネントです。ビデオでは、この機能が将来的に不要になり、refが単純なプロップとして扱われるようになることが述べられています。

💡サーバーアクション

サーバーアクションは、Reactがクライアントとサーバー間のデータ送受信を簡単に扱うための機能です。これにより、フォームの状態管理やオプティミスティックUI更新など、開発者はより直感的にバックエンドとのインタラクションを実装できるようになります。

💡useEffect

useEffectはReactのフックの一つで、副作用（API呼び出しやDOM操作など）をコンポーネント内で宣言的に扱うために使用されます。スクリプトでは、新しいReactのコンパイラとフックにより、useEffectを使用した従来のプロミス解決方法が改善されることが示されています。

💡フレームワークの収束

フレームワークの収束は、異なるフロントエンドフレームワークが似たような機能やAPIを持つようになり、それによって選択肢が実質的に同じになる現象を指します。ビデオでは、React、Vue、Svelteなどが互いにアイデアを借用しており、最終的には非常に似たAPIを提供するようになったと述べられています。

Highlights

React team's new blog post introduces significant improvements to React, enhancing developer experience.

The introduction of a compiler by the React team, a major development in React's evolution.

jQuery announces version 4.0, making substantial updates and moving towards ES modules.

Meta uses the new React compiler in production for Instagram, indicating its effectiveness.

The compiler simplifies coding by eliminating the need for hooks like `useMemo` and `useCallback`.

Comparison of React's complexity with simpler frameworks like Vue, Svelte, and Solid before React's compiler introduction.

The abolition of `useMemo` and `useCallback` hooks, reducing the mental load on developers.

The future elimination of `forwardRef`, simplifying DOM node exposure to parent components.

Introduction of server actions in React, enhancing the developer experience with data submission cycles.

New hooks like `useFormStatus` and `useOptimistic` to manage form data and provide an ultra-fast UI response.

The challenge of working with promises in React and improvements with the `use` hook.

The `use` hook's ability to handle promises and React context more flexibly than `useContext`.

The introduction of error and suspense boundaries to better manage promise states and errors.

Observations that major frameworks are becoming more similar in their APIs and abstractions.

The call for a unified framework to be built into the browser to end the fragmentation in web development frameworks.

Transcripts

a few days ago a shocking new blog post

from the reactjs team dropped as a react

hater I hate to say it but they fixed

react I tried to let the hate flow

through me but the react team made some

brilliant moves that will dramatically

improve the developer experience just

when you thought react had become the

new jQuery and the JavaScript framework

wars were coming to an end the react

team has Unleashed their secret weapon a

compiler and in today's video we'll find

out what that word means it is February

26 2024 and you're watching the code

report speaking of jQuery one thing that

you may have missed is that after nearly

a decade of anticipation jQuery just

announced version 4.0 it got rid of a

bunch of stuff made obsolete by the

JavaScript language itself dropped ie1

support and migrated to es modules most

frontend developers nowadays are too

smug and arrogant to use jQuery but this

is great news for the millions of

websites out there that still use it the

big news though is that reactjs is

getting a compiler meta is already using

this compiler in production to power

Instagram and will likely bring solid

performance improvements but most

importantly it will simplify the code we

write as developers Developers L react

code is pretty ridiculous compared to

Frameworks like view felt and solid like

imagine we have some state that needs to

be computed into another value we can do

it like this in react but that value

will be unnecessarily recomputed every

time the component reeners it's

inefficient to address this react

provides a hook called use memo memo

means memoization which itself means

remember it wraps the computation in

another function which will only run

when the state that it's dependent on

changes which has to be explicitly put

in this array if we look at all the

other Frameworks though they don't do

stuff like this like in view we have

this computed function but there's no

need to include that dependency array

and in spell 3 it's even more simple

with the dollar sign syntax although

it's being replaced with a rune in spel

5 the reason these Frameworks can let

you write more simplified code is

because they have a compiler unlike

react which is purely runtime based they

look at your code in advance to figure

out where the reactivity is and bundle

that into the final product that goes to

the browser but now that react is

getting its own compiler it means hooks

like use memo and use callback are a

thing of the past and that's huge

because not only is the code ugly as as

hell but it also removes the mental

boiler plate of asking the question to

memoize or not to memoize and they

confirmed my conspiracy theory that

react intentionally adds bad apis like

this just to look like Geniuses when

they remove them later on but use memo

is not the only bad feature going away

another thing you won't need in the

future is forward ref which creates a

higher order component when you need to

expose a Dom node to the parent instead

ref will just be a prop so you can

easily access it without having to wrap

another function that's an easy win but

a more controversial feature is server

actions you can already use actions in

nextjs and many have described the

developer experience as being like PHP

but without Lambos the general idea

though is that react handles the data

submission cycle for you from client to

server and then back again what's cool

about this is react provides hooks like

use form status or use form state to

easily handle the data in a form but

then alongside that you have hooks like

use optimistic to get that Ultra fast

Firebase like feel on any backend

database the UI updates instantly based

on the expected change then in the rare

case it fails it reverts back but

another thing that sucks about react is

working with promises in react server

components like in nextjs you can use

async await to fetch data directly in a

component that's awesome but you can't

do it in a client side component and you

still can't in react 19 but you can use

the use hook which is the next best

thing it works on both promises and

react context which means it makes the

Ed context hook obsolete because unlike

used context use can also be used inside

of loops and conditionals but using use

allows you to use the value of a

resolved promise directly in the UI now

a promis is asynchronous and its value

is initially pending so you can handle

the loading state by wrapping it in a

suspense boundary and it might also

reject and throw an error in which case

you can wrap it in an error boundary I

don't really love this code myself but

it's way better than the common approach

of resolving a promise with the use

effect hook bottom line is that these

are some huge improvements for react

what's funny though is that if we take a

step back all the major Frameworks are

starting to look identical and have all

copied each other's abstractions leading

to nearly identical apis just with

things named slightly different as a

civilized society it's about time we

decide on the one true framework then we

build that framework into the browser to

put an end to this Bloodshed once and

for all this has been the code report

thanks for watching and I will see you

in the next JS one