Lately we’ve been filled with cool stuff in the React community. In case you missed it, Reactathon happened at the beginning of May, and with it came a lot of interesting talks and discussions between people in the community.
In this post I’ll reference what I consider to be the most interesting and hot topics on the React community… and try to make it short.
If you haven’t seen the conference, you can take a look at this YT playlist for all sessions.
The state of React 2022
So first of all, what is the state of React currently? With React 18, what was once called concurrent mode is now concurrent features. This changes the approach into an incremental adoption, so that you could use concurrent features in specific places of your React app.
In this talk, Lee also announces Next.js new routing system which resembles Remix a lot. They want to take advantage of nested routes which is great! This allows us to provide a better user experience on pages that have one component that blocks rendering.
Last but not least, there are new developments when it comes to server-side rendering, and new client-side rendering APIs.
Edge computing
If you are unaware of this type of compute, Edge computing allows a better user experience, because it reduces the time you get a response with the content you want to visualize. The time is reduced because to process your request you don’t need to “talk” to a distant server on the oasis.
CDN providers like Cloudflare, are building new runtimes to allow you to run code closer to your customers – on the edge. Cloudflare workers for example, don’t use Node.js or Deno under the hood, it’s their own JS runtime. Of course, an effort is being done to standardize these runtimes.
In this talk, Kent talks about how Remix improves the developer experience for edge computing. First they use the Web Fetch API, and depending on where you want to deploy your function. Remix then translates the request/response objects to the respective platform’s API. They also support streaming in the edge, in order to send some content to the user quickly, and then send the rest.
With that said, this is all in JS/TS or WASM land. At least I haven’t seen a lot of support for other languages and runtimes (e.g. C#) on services that provide edge computing.
Streaming server components
With React 18 it’s now possible to stream changes to the browser, with new APIs like Suspense that allows for asynchronous processing.
Why is this cool? Because we don’t want to block rendering with data fetching. When our component needs to fetch data before rendering what the user wants to see, we need to render a loading spinner… which ain’t cool.
How about we initiate fetches before we render. This way the requests are in parallel and don’t block rendering. Using streaming server rendering fixes this, which is why it’s so awesome! Ryan Florence goes more in detail how this is done in this talk: When to fetch: Remixing React Router.
Bear in mind, this is just one way of rendering. Last year at React Conf 2021 there was an intro session about this topic as well: Streaming Server Rendering with Suspense. Another great session that talks about the different rendering patterns: Advanced Rendering Patterns: Lydia Hallie. It’s an amazing session to help you visualize the impacts on performance, and what are the trade-offs of each pattern.
