They made React great again?

Summary

In a recent update that has taken the development community by surprise, the ReactJS team has introduced a game-changing compiler that promises to significantly enhance the developer experience. This new compiler, already in use at Meta for Instagram, is set to simplify coding, eliminate the need for cumbersome hooks like useMemo and useCallback, and introduce efficient features like server actions and improved handling of promises. Furthermore, the release of jQuery 4.0 marks a milestone, shedding outdated features and embracing ES modules. The video highlights how these advancements are blurring the lines between major JavaScript frameworks, suggesting a future where a unified framework could potentially end the ongoing framework wars.

Takeaways

• 😲 React has released a new compiler that will improve developer experience and performance, and simplify code writing.
• 🥳 The compiler will eliminate the need for hooks like useMemo and useCallback, which add complexity to React code.
• 😎 Other features being removed include forwardRef and server actions, which have been described as having a poor developer experience.
• 🤩 The compiler will allow React to handle data submission and optimistic updates more efficiently, similar to frameworks like Firebase.
• 🎉 jQuery has finally released version 4.0, which removes obsolete features, drops IE11 support, and migrates to ES modules.
• 🤔 React's new compiler will make its API more similar to other frameworks like Vue and Solid, which already have compilers.
• 😄 The use hook will replace useContext and allow promises and React context to be used inside loops and conditionals.
• 🤯 The video suggests that all major JavaScript frameworks are converging towards similar APIs and abstractions.
• 🤞 The video proposes that the community should decide on a single framework and build it into browsers to end the "framework wars".
• 🤑 React has intentionally added bad APIs in the past to look like "geniuses" when they remove them later.

Q & A

What is the big news about React according to the script?

The big news is that React is getting a compiler, which Meta is already using in production to power Instagram.

What are the benefits of React getting a compiler?

The compiler will simplify the code that developers write and likely bring solid performance improvements. It will eliminate the need for hooks like useMemo and useCallback.

What is the purpose of the useMemo hook in React?

The useMemo hook wraps a computation in a function that will only run when the state it depends on changes, preventing unnecessary recomputation every time a component re-renders.

Why do frameworks like Vue and Solid have simpler code compared to React?

Vue and Solid already have compilers that look at the code in advance and figure out where the reactivity is, allowing developers to write more simplified code.

What is the issue with React's forwardRef feature that the compiler will resolve?

The forwardRef feature currently creates a higher-order component when you need to expose a DOM node to a parent. With the compiler, the ref will become a prop, making it easier to access without wrapping another function.

What are server actions in React, and why are they controversial?

Server actions handle the data submission cycle from client to server and back again. Some have described the developer experience as being like PHP, but without the benefits.

How does React currently handle promises in client-side components?

React currently can't use async/await to fetch data directly in client-side components. Instead, developers use the useHook to resolve promises and handle loading and error states with Suspense and Error boundaries.

What change is coming to the Solid framework in version 5?

In Solid 5, the dollar sign syntax for computed values is being replaced with a rune (a special character).

What did jQuery recently announce after a decade of anticipation?

jQuery recently announced version 4.0, dropping support for Internet Explorer 11 and migrating to ES modules.

What is the speaker's opinion on the convergence of major JavaScript frameworks?

The speaker believes that all the major frameworks are starting to look identical, copying each other's abstractions and leading to nearly identical APIs. He suggests that it's time to decide on "the one true framework" and build it into the browser to end the "bloodshed."

Outlines

00:00

📢 React's Brilliant Developer Experience Improvements

The author, who self-identifies as a React hater, acknowledges the brilliant recent improvements made by the React team to enhance the developer experience. With the introduction of a compiler, React aims to simplify the code developers write, addressing issues like unnecessary recomputation and providing a smoother experience compared to other frameworks like Vue, Svelte, and Solid. The post covers the upcoming changes, such as the removal of hooks like useMemo and useCallback, improvements to ref handling, and the introduction of server actions for handling data submissions. The author also praises the use of promises and the useHook, which simplifies handling asynchronous data. Overall, the post celebrates React's efforts to streamline its API and match the simplicity of other frameworks.

Keywords

💡React

React is a popular JavaScript library for building user interfaces. It is a framework that allows developers to create reusable UI components and efficiently manage their state. In the video, React is the central focus, as the speaker discusses recent improvements and changes to the React library that aim to enhance the developer experience. The video mentions that React was in danger of becoming the 'new jQuery' (another popular JavaScript library), but the React team has introduced a 'secret weapon' - a compiler - that will dramatically improve the way React code is written and executed.

💡Compiler

A compiler is a program that translates high-level source code (written in a programming language like JavaScript) into a lower-level, more efficient form of code that can be executed by a computer. The video announces that React is getting its own compiler, which will help simplify the code that developers write. With a compiler, React can analyze the code in advance and optimize it for better performance, reactivity, and a cleaner developer experience. This is a significant change, as React was previously a purely runtime-based framework.

💡useMemo

useMemo is a React hook that allows developers to memoize (or cache) the result of a function call. Memoization is a technique used to optimize performance by caching the results of expensive function calls and returning the cached value when the same inputs are provided again. The video suggests that with the introduction of a compiler in React, hooks like useMemo and useCallback will become obsolete. These hooks were necessary in the past to manually optimize certain computations and prevent unnecessary re-renders, but the compiler will handle these optimizations automatically.

💡forwardRef

forwardRef is a higher-order component in React that allows developers to expose a DOM node to a parent component. It is used when a child component needs to access a DOM element managed by a parent component. The video mentions that with the new compiler, developers won't need to use forwardRef anymore, as the 'ref' will become a prop that can be easily accessed without wrapping another function. This change aims to simplify the code and make it more straightforward to work with refs (references to DOM elements) in React components.

💡Server Actions

Server Actions is a feature in React that allows developers to handle data submission cycles from the client to the server and back again. It provides hooks like useFormStatus and useFormState to easily handle form data, as well as hooks like useOptimistic to achieve a fast, responsive UI that updates instantly based on expected changes. The video suggests that while Server Actions can provide a smooth developer experience, some have compared it to PHP (a server-side scripting language) in terms of its approach to handling data submission.

💡Suspense

Suspense is a React feature that allows developers to handle asynchronous data loading and rendering. When using Suspense, developers can wrap components that fetch data asynchronously (e.g., using a Promise) in a Suspense boundary. This boundary can then handle the loading state and display a fallback UI while the data is being fetched. The video mentions that Suspense can be used in combination with the 'use' hook (a new feature in React 19) to handle loading states and potential errors when working with Promises and React context.

💡useEffect

useEffect is a React hook that allows developers to perform side effects in functional components. Side effects are any actions that can affect something outside the scope of the current function, such as fetching data, updating the DOM, or subscribing to events. The video suggests that using the 'use' hook is a better approach than resolving Promises with the useEffect hook, which is a common pattern in React development.

💡Frameworks

Frameworks are software libraries or platforms that provide a structured environment for building applications. In the context of the video, the speaker discusses various JavaScript frameworks like React, Vue, and Solid. The video suggests that as these frameworks evolve, they are starting to converge on similar abstractions and APIs, leading to nearly identical developer experiences across different frameworks. The speaker proposes that it's time to decide on 'the one true framework' and build it into web browsers, putting an end to the 'JavaScript framework wars' and the need for third-party libraries.

💡Reactivity

Reactivity refers to the ability of a system or application to automatically update and respond to changes in data or state. In the context of the video, the speaker mentions that other frameworks like Vue and Solid have compilers that allow them to analyze the code in advance and figure out where reactivity is needed. This allows for more simplified code compared to React's runtime-based approach. With the introduction of a compiler in React, the framework will be better equipped to handle reactivity, potentially eliminating the need for manual optimizations and complex hooks like useMemo.

💡Mental Boilerplate

Mental boilerplate refers to the cognitive load or mental effort required to understand and work with certain programming patterns or constructs. In the video, the speaker suggests that the use of hooks like useMemo and useCallback in React creates unnecessary mental boilerplate, as developers have to constantly ask themselves the question 'to memoize or not to memoize?' This mental burden is seen as a drawback of the current React approach, and the introduction of a compiler is expected to reduce this mental boilerplate by handling optimizations automatically.

Highlights

A shocking new blog post from the ReactJS team was released, suggesting that React has been fixed and will dramatically improve the developer experience.

jQuery announced version 4.0, which got rid of obsolete features, dropped Internet Explorer 11 support, and migrated to ES modules.

ReactJS is getting a compiler, which Meta is already using in production to power Instagram and will likely bring solid performance improvements.

The React compiler will simplify the code developers write by eliminating the need for hooks like useMemo and useCallback, which are required to handle unnecessary recomputations in the current version.

The React compiler will allow for more simplified code, similar to frameworks like Vue and Solid, which already have compilers that analyze the code ahead of time to figure out reactivity.

The React compiler will also eliminate the need for features like forwardRef, which creates higher-order components for exposing DOM nodes to parent components.

Server actions, a controversial feature already available in Next.js, will be integrated into React, providing hooks like useFormStatus and useFormState for handling data submission cycles and optimistic UI updates.

React will improve its handling of promises and async/await in client-side components using the useHook, which can also handle React context and replace the useContext hook.

These improvements in React aim to simplify the code developers write and bring it closer to other frameworks, which have already adopted similar abstractions and APIs.

As frameworks become increasingly similar, there is a call for the industry to decide on a single true framework and build it into the browser to end the "bloodshed" of framework wars.

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