Guy with notebook

April 15, 2022

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

Olga

Olga Vasylenko

Marketing Specialist
Bartek

Bartosz Antoszczyk

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

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? 

frontend news react next releases

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.

What do you think? Share your impressions!

Become a part of the team that fits you, create really cool videos with us!

Interesting projects from all over the globe, opportunities to grow and nice people attached. Check out our openings.

Join us
Microphone
Ask Us any question.

(preffered about front end, in other case we can answer longer and not on topic)

Free consultation usually takes 15 minutes, where we can answer any front end related questions. We are always trying to agree term which suits both sides. Our Experts take care about quality of all answers.

Contact us
Photo of Cezary
Photo of Kinga
Photo of Krzysztof

How the consultation looks like?

  1. Ask question

  2. - Which technology choose to build quickly MVP?

    - How to solve problem of required technologies in the project?

    - How to extend my team with experts of UX/UI?

    - Is possible to ...

  3. Who will contact You?

  4. Immediately after ordering a free consultation, our office will contact you, ask about the topic and arrange a convenient date for an interview with an expert.

    Each interview is conducted by our internal consultant based on his full experience and knowledge. Even if he or she does not know the answer (which is rare), he will consult the topic with the full team and come back with the answer.

question mark icon
Arrow icon
Brain cog icon
Arrow icon
Video call icon

Meet our hosts

Olga

Olga Vasylenko

Marketing Specialist

Bartek

Bartosz Antoszczyk

Frontend Developer

Subscribe for tech insights

We will keep you up-to-date with fresh front end podcasts, news and articles

Still have some questions?

If you have any questions, feel free to contact us. Our Business Development Team will do their best to find the solution.