React Compiler i inne zmiany w React (film, 4 minuty)
Kilka dni temu zespół React.js opublikował zaskakujący post na blogu. Jako osoba, która nie jest fanem Reacta, muszę przyznać, że dokonano ogromnych zmian, które znacząco poprawią doświadczenia deweloperów. Zespół Reacta wprowadził tajną broń, kompilator, co zmienia zasady gry. Oznacza to, że React przestaje być postrzegany jako nowy jQuery, a wojny frameworków zaczynają przybierać nowy wymiar. Wszystko to zbiega się z ogłoszeniem nowej wersji jQuery 4.0, która kończy niemal dekadę oczekiwań, wprowadza obsługę modułów ES i rezygnuje z wsparcia dla IE11. Choć wielu deweloperów front-endowych może być teraz zbyt pewnych siebie, to dobra nowina dla milionów stron wciąż korzystających z jQuery.
Jednak najważniejszą wiadomością jest to, że React.js uzyskuje kompilator. Meta już wdrożyła go w produkcyjnie działającym Instagramie, co przyniesie solidne poprawy wydajności i uprości kod, który piszemy. Obecnie kod w React jest dość skomplikowany w porównaniu do innych frameworków, takich jak Vue, Svelte czy Solid. Przykładowo, jeśli mamy stan, który trzeba przekształcić w inny, możemy to zrobić w React, ale wartość ta będzie niepotrzebnie obliczana przy każdym renderowaniu komponentu, co jest nieefektywne. Tutaj wkracza hook useMemo, który używa memoizacji, aby obliczenia były wykonywane tylko w przypadku zmiany stanu.
React 19 przynosi liczne zmiany, które eliminują przestarzałe funkcje. Na przykład, nie będzie już potrzeby korzystania z useMemo i useCallback, co jest wielką ulgą, ponieważ pozbywa się to barier psychicznych związanych z pytaniem, czy należy użyć memoizacji. Zmiany te są potwierdzeniem teorii spiskowej, że React celowo wprowadza złożone API, aby później występować jako geniusze, gdy je usuwają. Dodatkowo, forward ref również znika. Teraz ref będzie po prostu props, co ułatwi wygodne uzyskiwanie dostępu do DOM bez potrzeby opakowywania w dodatkową funkcję.
Co więcej, nowe funkcjonalności, takie jak server actions, sprawiają, że z doświadczeniem dewelopera można porównać go do PHP, chociaż bez spektakularnych samochodów. Główna idea polega na tym, że React zajmie się cyklem przesyłania danych między klientem a serwerem, a nowoczesne hooki, jak useFormStatus, sprawią, że zarządzanie danymi w formularzu będzie proste. Mimo że wiele rzeczy w React wymagało dotychczas obejścia, nowe podejście czyni to znacznie prostszym. Na przykład, w komponentach serwera w Next.js można użyć async await, aby bezpośrednio pobierać dane.
Podsumowując, zmiany w React przynoszą ewidentne udoskonalenia oraz przekształcają to, jak programiści będą korzystać z tego frameworka. Ciekawe też, że wszystkie główne frameworki zaczynają się do siebie upodabniać. W chwili pisania tego artykułu, wideo miało 1134865 wyświetleń i 48504 polubień. To dowód na to, jak zainteresowanie nowymi funkcjonalnościami Reacta rośnie, a deweloperzy z niecierpliwością czekają na nadchodzące zmiany.
Toggle timeline summary
-
Wprowadzenie do nowego wpisu na blogu zespołu React.js.
-
Zespół React wprowadza znaczące aktualizacje w celu poprawy doświadczenia deweloperów.
-
React wprowadza nowy kompilator.
-
jQuery ogłasza wersję 4.0 po latach oczekiwania.
-
Meta wdraża nowy kompilator React w produkcji.
-
Porównanie aktualnych nieefektywności React z innymi frameworkami.
-
Wyjaśnienie hooka useMemo dla optymalizacji wydajności.
-
Nowy kompilator React uprości praktyki kodowania.
-
Usunięcie funkcji forward ref w celu uproszczenia dostępu do props.
-
Wprowadzenie akcji serwerowych w React.
-
Dynamiczne aktualizacje UI z wykorzystaniem optymistycznego przetwarzania danych.
-
Nowy hook do obsługi obietnic i kontekstu w React.
-
Udoskonalenia w obsłudze kodu asynchronicznego.
-
Obserwacje dotyczące podobieństw frameworków w branży.
-
Apel o zjednoczony framework, aby zakończyć wojny frameworków.
-
Zakończenie i podziękowanie za oglądanie.
Transcription
A few days ago, a shocking new blog post from the React.js 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 IE11 support, and migrated to ES modules. Most front-end 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 React.js 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. Currently, React code is pretty ridiculous compared to frameworks like Vue, Svelte, 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 re-renders. It's inefficient. To address this, React provides a hook called useMemo. 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 Vue, we have this computed function, but there's no need to include that dependency array. And in Svelte 3, it's even more simple with the $ syntax, although it's being replaced with a rune in Svelte 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 useMemo and useCallback are a thing of the past. And that's huge because not only is the code ugly as hell, but it also removes the mental boilerplate 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 useMemo 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 Next.js, 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 useFormStatus or useFormState to easily handle the data in a form, but then alongside that, you have hooks like useOptimistic 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 Next.js, 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 useContext hook obsolete. Because unlike useContext, 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 promise 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 useEffect 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. Angular. 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.