DEV Community: Arif Almas

New Features in React 19

Arif Almas — Mon, 08 Apr 2024 13:49:24 +0000

In this article, I will share what’s new in React 19 so you can start experimenting with some of the features and learn about what’s changing.

Just keep in mind that as I write this, React 19 is still work in progress. Make sure you follow the official guide on GitHub and the official team on social media to stay updated with the latest developments.

New Features in React v19 — Overview
Here’s a quick overview of the new features React 19 will have:

🤖 React compiler: React is working on implementing a new compiler. Currently, Instagram is already leveraging this technology, and it will be released in future versions of React.
🔥 Server components: React has introduced the concept of server components after years of development. You’ll now be able to use this feature with Next.js.
💪 Actions: Actions will also revolutionise how we interact with DOM elements.
📰Document Metadata: Another much-needed improvement is on the horizon, empowering developers to accomplish more with less code.
💼 Assets Loading: This will enable assets to load in the background, which will improve both the application’s load time and the user experience.
⚙️ Web components: This is particularly fascinating: React code will now enable us to incorporate web components. I’m incredibly excited about this development, as it will unlock a myriad of possibilities.
🪝 Enhanced hooks: Exciting new hooks are on the horizon, poised to revolutionise our coding experience.
The constant hunt for code causing re-rendering and the subsequent optimisation efforts have been a recurring task for engineers. But with React 19, this concern will be alleviated. The framework will handle re-rendering automatically, streamlining the development process.

Previously, developers relied on techniques such as useMemo(), useCallback(), memo, and so on to manage re-rendering. But with React 19, such manual interventions will no longer be necessary.

The framework will intelligently identify and memoize code under the hood, resulting in cleaner and more efficient code.

🤖 React Compiler Currently, React doesn’t automatically re-render on state change. A way to optimise these re-renders is to manually use useMemo(), useCallback(), and memo APIs. As per React's team, this was a "reasonable manual compromise". Their vision was to let React manage these re-renders.

But the React team realized that manual optimisation is cumbersome, and the feedback from the community encouraged them to solve this issue.

And so the React Team has created the “React compiler”. The React compiler will now manage these re-renders. React will decide automatically how and when to change the state and update the UI.

With this, we developers don’t need to do this manually anymore. It also means no need to use useMemo(), useCallback(), and memo.

As a result, React will decide which components to optimise and when, along with what to re-render.

One thing I love about React is that before introducing new breaking changes to the outer world, the React teams use these new features first on their production products . Currently, React Compiler is powering instagram in production.

🔥Server components If you haven’t heard about server components yet, you’re missing out on one of the most exciting developments in React and Next.js.

Up until now, React components have primarily run on the client side. But React is introducing the groundbreaking concept of running components on the server side.

In React 19, server components will be integrated directly into React, bringing a host of advantages:

SEO: Server-rendered components enhance search engine optimisation by providing more accessible content to web crawlers.
Performance Boost: Server components contribute to faster initial page loads and improved overall performance, particularly for content-heavy applications.
Server-Side Execution: Server components enable executing code on the server, making tasks like API calls seamless and efficient.
These advantages underscore the transformative potential of server components in modern web development.

The below code is in React but will run on the server. You just need to add 'use server' as the first line of the component. This will make the component a "server component". It won't run on the client side and will only run on the server side.

So how can you use a server component?

We can import requestUsername in any React component in the same project. After importing the server component in any React component, we can use "Actions" (we will learn about this soon) to do a specific task.

'use server';

export default async function requestUsername(formData) { const username = formData.get('username'); if (canRequest(username)) { // ... return 'successful'; } return 'failed'; }
In the Actions section, you’ll learn more about how to use server components.

Currently Next.js has sever-side component support. You can read more about server components in Next here. With React19, server component support will be available directly in React.

💪Actions In version 19, another exciting addition will be Actions. This is going to be a game-changer for how we work with forms.

Actions will let you integrate actions with the HTML tag

. In simpler terms, you’ll be able to replace the onSubmit event with Actions. These actions are HTML form attributes.

Before Actions:
In the code snippet below, we’ll utilize the onSubmit React event, which triggers the execution of the search method upon form submission. But it's important to note that currently, the search method runs solely on the client-side. We're limited to using React events for form submission, meaning the search cannot be executed on the server side.

<form onSubmit={search}> <input name="query" /> <button type="submit">Search</button> </form>
After Actions:
With the introduction of server components, Actions can be executed on the server side. In our JSX, with

, we can drop the onSubmit event and use the action attribute. The value of the action attribute will be a method to submit the data either on the client or server side.

You can execute both synchronous and asynchronous operations with actions, streamlining data submission management and state updates. The goal is to make the working with forms and handling data easier.

Let’s look at an example to see how this works:

"use server"
const submitData = async (userData) => { const newUser = { username: userData.get('username'), email: userData.get('email') } console.log(newUser) }
const Form = () => { return <form action={submitData}> <div> <label>Name</label> <input type="text" name='username'/> </div> <div> <label>Name</label> <input type="text" name="email" /> </div> <button type='submit'>Submit</button> </form> }
export default Form;
In the above code, submitData is the action in the server component. form is a client side component which is using the submitData as action. submitData will be execute on the server. The communication of the client (form), and server (submitData) components is only possible because of the action attribute.

⚙️ Web components Ever since, I’ve been captivated by their potential. If you’re not familiar with web components, let me break them down for you:

Web components allow you to create custom components using native HTML, CSS, and JavaScript, seamlessly incorporating them into your web applications as if they were standard HTML tags. Pretty amazing, right?

Currently, integrating web components into React isn’t straightforward. Typically, you either need to convert the web component to a React component or install extra packages and write additional code to make web components work with React. This can be frustrating.

Luckily, React 19 will help you integrate web components into your React code much more easily. If you come across a really useful web component, such as a carousel, you can seamlessly incorporate it into your React projects without the need to convert it into React code.

This streamlines development and allows you to leverage the vast ecosystem of existing web components in your React applications.

But as of now, there are no further details on how the code will look. Still, I am hopeful that it will involve simply importing a web component into a React codebase, similar to module federation. I’m eagerly awaiting further details on this implementation from the React team.

📰 Document Metadata Elements like “title,” “meta tags,” and “description” are crucial in optimising SEO and ensuring accessibility. In React, where single-page applications are prevalent, managing these elements across different routes can be a bit of a hassle.

Currently, developers often resort to writing custom code, or using packages like react-helmet to handle route changes and update metadata accordingly. This process can be repetitive and error-prone, especially when dealing with SEO-sensitive elements like meta tags.

With React19, we can use the title and meta tags directly in our React components:

Const HomePage = () => { return ( <> <title>Freecodecamp</title> <meta name="description" content="Freecode camp blogs" /> // Page content </> ); }
This was not possible before in React. The only way was to use a package like react-helmet.

💼 Asset Loading In React, you’ll need to carefully manage the loading experience and performance of your applications, particularly with images and other asset files.

Often, the view renders first in the browser, followed by stylesheets, fonts, and images. This can result in a flicker from non-styled (or flash of unstyled content) to a styled view.

To mitigate this issue, developers often resort to adding custom code to detect when these assets are ready, ensuring that the view is displayed only after everything has loaded.

In React 19, images and other files will load in the background as users explore the current page. This improvement should help improve page load times and reduce waiting periods.

🪝 New React Hooks React Hooks have been one of the most loved features introduced in the library. You have likely used React’s built-in hooks many times, and perhaps you’ve tried making your own custom hooks, too. Hooks are so popular that they’ve become a React programming pattern.

In React 19, the way we use useMemo, forwardRef, useEffect, and useContext will change. This is mainly because a new hook, use, will be introduced.

🎉 New React Hooks
– The new use() hook
– The useFormStatus() hook
– The useFormState() hook
– The useOptimistic() hook

Here’s a quick summary of the exciting changes coming to React v19:
🤖 There will be a new React compiler that will be introduced in a future version of React.
🙌🏽 We’ll now have auto re-rendering, memoization, and optimisation of state and UI.
🔮 There will be some new hooks like use() that will help simplify promises and async code.
⚙️ There will now be server side component support in React.
📝 We’ll have better form handling using actions, useFormStatus(), useStatusForm(), and useOptimistic().
🖼 React will optimise asset loading to enhance performance by using suspense under the hood.
🔗 We’ll have web component integration in React.

If you liked this article, found something you’d like to discuss, or just want to stay connected, come and say hi on LinkedIn .

Virtual DOM V/S Browser DOM — Difference Analysis

Arif Almas — Sat, 15 Jul 2023 16:42:43 +0000

In modern web development, the concepts of virtual DOM and browser DOM play an important role in the performance and efficiency of web applications. Virtual DOM and browser DOM are both fundamental concepts that developers need to understand when working with frameworks like React.js. Although they relate to manipulating and rendering the Document Object Model (DOM) of a web page, there are significant differences between them.

What is virtual DOM?

Virtual DOM is a concept and technique used in JavaScript frameworks such as React to improve the efficiency and performance of browser DOM updates. It is a lightweight copy or representation of the actual browser DOM, created and managed by the framework Virtual DOM allows developers to work with a virtual representation of the UI and perform efficient updates and manipulations without directly interacting with the browser DOM.

What is the browser DOM?

Browser DOM (Document Object Model) is a programming interface provided by web browsers. It represents the HTML structure of a web page as a tree-like structure of objects. Each HTML element, attribute, and text node is represented as a node in the DOM tree. The browser DOM provides methods and properties to manipulate and interact with these nodes, allowing developers to dynamically update and change the content, style, and behavior of a web page using JavaScript.

Understanding their differences is crucial to building efficient and responsive applications. Here are the key differences between virtual DOM and browser DOM

Virtual DOM key points:

Representation: Virtual DOM is an abstraction or virtual representation of the actual browser DOM. It is a simple copy of the original DOM tree maintained by frameworks like React.
Location: The virtual DOM resides in memory and is created and managed by a JavaScript framework/library (eg, React) separate from the browser's rendering engine.
Manipulation: Developers interact with the virtual DOM using JavaScript, making changes to the virtual DOM tree by updating component state or props.
Operation: When changes occur in the virtual DOM, it performs a different algorithm to identify the minimum set of changes required to synchronize the virtual DOM with the browser DOM.
Efficiency: The virtual DOM browser allows efficient updates by performing batching changes and optimized operations on the DOM, eliminating unnecessary reflows and repaints.

Browser DOM key points:

Representation: The browser DOM is the actual Document Object Model, a tree-like structure that represents the HTML elements, CSS styles, and JavaScript interactions of a web page.
Location: The browser DOM is a part of the browser's rendering engine and is responsible for rendering and displaying web content.
Manipulation: Developers can use JavaScript APIs such as getElementById, appendChild or `setAttribute' directly using the browser DOM.
Operation: Changes to the browser DOM trigger immediate reflow and repaint, affecting the layout and visual rendering of web pages.
Performance: Manipulating the browser DOM directly can be computationally expensive, as each change can result in re-rendering the entire document, impacting performance.

Virtual DOM and browser DOM have their own advantages and use cases. Here are some advantages of virtual DOM compared to browser DOM:

Advantages of Virtual DOM:

Performance Optimization: Virtual DOM introduces layer of obstruction between application and browser DOM. This allows React (or other frameworks using the virtual DOM) to perform efficient deflation algorithms and update only necessary parts of the DOM tree. This reduces the number of actual manipulations and repaints in the browser, resulting in improved performance and rendering speed.
Fast Updates: With virtual DOM, updates to the UI can be batched and optimized. React creates a diff-tree to detect changes to the virtual DOM and then applies only those specific changes to the browser DOM. This selective update process is much faster than directly modifying the entire browser DOM tree.
Cross-platform consistency: Virtual DOM provides a consistent abstraction layer that is not tied to any specific browser or platform. It allows developers to write code using the Virtual DOM API and work consistently across different browsers and platforms without worrying about native implementation differences.
Easier Testing: Since the virtual DOM is a JavaScript object, it is easier to test and manipulate than the actual browser DOM. Testing tools and libraries can work directly with the virtual DOM, enabling more comprehensive and efficient testing of UI components and comprehensives.

Advantages of browser DOM:

Browser Integration: The browser DOM is the actual interface provided by the web browser, tightly integrated with the browser's rendering engine and functionality. It provides access to browser-specific features, APIs, and events, which may be required for specific web applications.
Direct Manipulation: With browser DOM, developers have direct control over individual DOM nodes and can manipulate them using JavaScript. This layer of control is for low-level DOM manipulation or when working with specific browser features that are through virtual DOM abstractions. Useful for what may not be published.
Introduction: The browser DOM has been around for a long time and is well documented. Many developers are familiar with its API and usage patterns, which can make it easier to work with, especially for simple and small-scale projects.

In short, the virtual DOM browser serves as a lightweight and efficient representation of the DOM. This allows JavaScript frameworks/libraries like React to optimize the update process by performing minimal, targeted changes to the browser DOM based on differences identified through the virtual DOM diffing algorithm. This approach minimizes the impact on performance and increases the overall responsiveness of web applications.

On the other hand, the browser DOM is the actual live representation of the web page and is responsible for rendering and displaying the content. Direct manipulation of the browser DOM can be expensive in terms of performance, as it immediately triggers a reflow and repaint. The choice between the two depends on the specific requirements of the project and the trade-offs that need to be considered.

Read the story of Arif's dream joy in Ittefaq paper.

Arif Almas — Thu, 06 Jul 2023 08:15:26 +0000

People do not exist without suffering. Everyone has difficulties in their life. Every step has to be fought and struggled. For some people this suffering is little and for some this suffering is very much. I understand how much it takes to achieve even a little in life. Let me share with you some lessons from my life.

If you want to do something good in life or reach your desired goal then first of all shed your emotions and learn to be alone, fight alone. If you have many friends in life, leave them first. Because one day you will see that even your best friend will not come forward in your time of need or danger. Make proper use of time. Every second that goes out of your life will never come back so make use of the time.

Along with studies you need to acquire skills in any field. First, figure out what you like to do best, and strive to master it. Remember that at this same time many will come to give you knowledge but he will not be by your side but will weaken you. So go ahead at your own pace without listening to anyone's words. We read from our childhood that 'buying a book never goes bankrupt', just like if you lose a fortune to acquire any skill you have, remember that if your hard work and intentions are honest, you can get it back.

If you can't learn by yourself, if you need a mentor, then enroll in a good course. Don't be afraid to buy a 'good course and you won't go broke'. Learn to your best. Work hard and suffer. Don't expect to get money or a job early and your hard work will get you to the right place at the right time. So spend time behind the flame first.
This is the time to lose the most morale. There may be many pests in your society or around you who will always tell you what you are doing? Can't do anything with it. You will not be given etc. Again, you may think that you will not be able to, but keep in mind that this little boy can do it, so why can't I? Keep trying again and again and never give up under any circumstances. Carry on you can it you must.

The most turning point of my life was the 'Think-In-A-Redux-Way' course of Learn with Sumit when I didn't have a single rupee and enrolled in the course with the money I took from my mother. It didn't teach me, but it changed the direction of my life ❤️.

Acknowledgments and thanks to Dainik Ittefaq for publishing this report. And many thanks and love to Shakirul Alam Shakil brother. Brother's words and behavior are incredibly beautiful 💐.

Read the story of my dream joy in Ittefaq paper. Where I spoke some truth and correct words of my life.

E-paper link