React 18, Next update and other releases - Frontend News #24

Frontend News is back! What’s in FN #24:

1. React 18
2. Next 12.1
3. Strapi v4
4. Deno 1.20
5. CSS News
6. Safari 15.4 and Chrome 100
7. Electron 18.0

Transcription

Olga

Today I have an official statement for you. The Frontend News is back! Congratulations, Bartosz, it's nice to see you here today. 

Bartosz

Hello, everyone. I'm Bartosz and I'm really happy to be here with you with the new Frontend News series. Today we have seven amazing news for you. 

Olga

Today we have seven amazing news for you. What do we have today? 

Bartosz

Okay, so first we're going to talk about React version 18. 

Olga

The next is Next 12.1. 

Bartosz

Then we're going to talk about Strapi v4. 

Olga

The fourth news is Deno 1.20. 

Bartosz

Another news will be from the CSS world. 

Olga

Then we're going to jump to Safari 15.4 and Chrome 100. 

Bartosz

And last but not least will be Electron version 18. 

Olga

But first, let's watch the intro. By the way, how was your week? 

Bartosz

Quite nice. I've got a lot of work to do, but I'm really happy to be here with you. 

Olga

Yeah, I see it in your eyes. 

Bartosz

Definitely. 

Olga

Great. You're happy because we have amazing news today. So the first news is React version 18. So what's in?

React 18

Bartosz

The most important feature in React, JavaScript library, version 18 is concurrency. It's like a game changer in my opinion because it's all about processing multiple simultaneous state updates. It is a brand new concept and set of features that help with state update prioritization. It means that the urgent state updates cannot be prioritized over less urgent long taking updates. You can basically tell React that a certain state update has a lower or higher priority than other state updates and then React is able to treat the other updates with higher priority.

Speaking about concurrency, we now have new features, like transitions. Transition is basically the part of the new concurrency concept - it is all about distinguishing between urgent and non urgent updates. So we have urgent updates, like direct interactions like typing, like clicking, pressing and so on. And we have transition updates which means that transition the view from one view to another view. Speaking about transitions, we now have two new features in React. So it's basically useTransition hook and startTransition function. useTransition hook is about starting transitions which means including a value to track depending state and startTransition is the method that starts transition when the hook cannot be used. 

Another new improvement is automatic batching. So it means that batching is when React groups multiple state updates into a single rerender for better performance issues. Previously without automatic batching we only batched updates inside event handlers in React. For now we also have the possibility to update inside of promises, set timeouts, native event handlers and other events that were not batched in React by default. So basically with automatic batching the updates will be now batched automatically. 

Olga

It's a lot of features. 

Bartosz

Yes, but it's not all yet. 

Olga

You can check the documentation and check by yourself. 

Bartosz

So another new feature in React version 18 is information about server components which will basically happen in the next few months and now are in the alpha development stage. Server components will be something which executes on the server and will work with the client side components, so it will enable React to be more like a full-stack framework, not only the UIs (building user interfaces). Last but not least, we have new suspense features in React 18. Suspense lets us specify the loading state for a part of the component tree if it's not yet ready to be displayed. With React 18 the support was added for suspense on the server and expanded its capabilities using concurrent rendering features. Now React will efficiently update and render just the right components when your data changes.

Speaking about new features in React version 18, it's worth mentioning about new client and server rendering APIs. We have now two new functions, it's createRoot and hydrateRoot. createRoot is basically the new method to create a root to render or unmount, so we will now use it instead of ReactDOM.render. How to use the createRoot method? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; and so on.

Btw, it's great in React that you can develop new features in it without rewriting existing code - easily pass rich data.

It's also worth mentioning that the new features in React 18 don't work without it, so we have to change it with our new projects when we start. That's all about the first news. 

Olga

Btw, did you know that React is the core technology stack in Frontend House? If you want us to help you create interactive UIs, modern websites or power mobile apps, just give us call. And now we're going to jump to Next. So what about Next?

Next 12.1

Bartosz

Speaking about the new version of Next 12.1, we have to mention the On-demand Incremental Static Regeneration feature. Next.js exposes a function on stable revalidate which allows us to revalidate individual pages that use guest static props. So it basically means that for us it's easier to update our sites when content from our headless CMS is created or updated and the crucial metadata changes. So something like prices, description category, reviews, content, costs, and so on. What is more, you can now manually purge the Next.js cache for a specific page on-demand. Next important thing mentioned in Next.js 12.1 is improved SWC support. It was introduced as a part of Rust-based compiler that takes advantage of native compilation. Basically with version 12.1,  Next.js added support to the Next.js compiler for things like styled-components, importSource, legacy-decorators, relay, remove-react-properties and remove-console. Another thing is that with the new version of Next.js we don't need to automatically configure just for us. Next.js now automatically configures just for us using the Rust-based Next.js compiler and it transforms files including auto mocking stylesheets, loading environments, ignoring node_modules from test resolving and transforms, and so on. 

Speaking about SWC, we now have faster minification and faster image optimization. In Next.js version 12.1 we have also self-hosted Next.js improvements, which means that we have now 80% smaller Docker image for self-hosted Next.js applications. 

Olga

Some time ago Strapi presented version 4 and it has a lot of features. 

Strapi v4

Bartosz

Yes, it has plenty of new features, like the Strapi design system, the new plugin API, improved database query engine, more powerful Rest and GraphQL APIs, and many others. Speaking about database changes in Strap, there is now a new way queries to the database are done. Now it's possible to select which fields and relations you are going to load from the database and you can then make complex queries on components, sort and filter data and do things like that. 

Olga

The next one is Deno 1.20 release. 

Deno 1.20

Bartosz

Speaking about the new Deno version 1.20, there are new features, like faster calls into Rust, two new subcommands like deno task and deno bench, changes like low level API to upgrade HTTP connections, and dedicated interface for TCP and Unix connections. What is also worth mentioning is that Deno has now auto-compression for HTTP response bodies. It means that when a client request supports either for gzip or brotli compression and the server responds with a body that basically isn't a stream, the body will automatically compress it with Deno without any need to configure it for you. Regarding faster calls into Rust, we can say that communication of the layer is speeding up to be like 60% faster, so it's like a big change for Deno in terms of Rust. 

Olga

Amazing. So what's next? 

CSS news

Bartosz

Next we're going to mention some new CSS features which came up in 2022. There are lots of changes regarding new CSS improvements, but I would like to mention three of them. So firstly we would jump to the :has() pseudo-class. Basically :has() is a pseudo-class which enables us to select an element depending on its descendants. It means that you will not even have to write all the values, like comma separated, and it will be easier for us to grab some elements. The next breaking change regarding CSS in 2022 is cascade layers. Cascade layers is something which enables us and gives us more power of using the cascading part of CSS. With cascade layers we have now possibility to split our CSS code into several layers via the layer at-rule. So basically it means that you can now effectively group your CSS code into smaller chunks or layers as it is called. 

Olga

Do you have more breaking changes in here? 

Bartosz

Yes, I would also like to speak about accent colors. Accent-color property is all about changing colors in the form elements, so everything like checkboxes, radio buttons, inputs and progress bars, and so on. We are developers who know that styling and input is kind of a pain for us and all browsers treat it a little bit differently. Now with accent-color properties you have the possibility to easily apply a color that fits your brand and also to keep the browser default input. 

Olga

That's great. Finally developers will be happy. The next news on our list is Safari 15.4 and Chrome 100. 

Safari 15.4

Bartosz

Yes, speaking about the new version of Safari, we have some crucial changes regarding lazy-loading of the images. From version 15.4 Safari added support for lazy-loading images with loading attribute on the image. Basically it provides developers the possibility to defer loading images until the user scrolls near them - and you can just do it by adding a loading attribute on the image element. Webkit also added support for cascade layers and :has() pseudo-classes so now we can use it also in Safari. Another fixed issues regarding Safari version 15.4 are updates to the Web Inspector. The latest updates for the Web Inspector provides us with new helpful tools regarding new CSS features of cascade layers and layer rulesets. 

Olga

So what's in Chrome?

Chrome 100

Bartosz

In Chrome version 100 there is no special changes but there are some things regarding cookie management, API for better screen management between screen browsers, and some improvements regarding security. 

Olga

Interesting. And the last one is Electron. What's in it?

Electron 18

Bartosz

Regarding Electron version 18 we have some support for more color formats in setBackgroundColor function. We have also added focus and blur events to web contents. And another thing worth mentioning is removing the old BrowserWindowsProxy. It was based on the implementation of windows.open. This removes the nativeWindowOpen option from the web preferences. 

Olga

Yeah and we always give links in the description so you can read the full version. Is that it? 

Bartosz

I guess yes. 

Olga

Oh, we don't have more news unfortunately but next time it will be more news and more interesting features for you. So thank you.

Bartosz

Thank you

Olga

  High five. See you next time. Check other videos on our Frontend House YouTube channel and see you next time. Bye. 

Bartosz

Bye.