Logic Apps vs Power Automate: 15 Key Differences Explained
Automating processes is crucial for the smooth running of business, whether it is in Legal, healthcare, transport, or Fintech. Several options are accessible to do this. But which...
Kapil Panchal - June 26, 2022
Listening is fun too.
Straighten your back and cherish with coffee - PLAY !
ReactJS is an open-source, component-based JavaScript front-end toolkit that allows you to develop a single-page application (SPAs). It is developed by Facebook in 2013. This library allows the reusing of UI components. The new version of React v18.0 was recently launched in March 2022 with new features like performance improvements, concurrency, automatic batching, new APIs like startTransition, and streaming server-side rendering with support of suspense.
In the context of React.js, concurrency means having more than one task in progress at a time, and concurrent tasks can overlap depending on which is more urgent & with more priority.
In all previous versions of React, it could handle only one task at a time, and a task could not be interrupted once it had started. This approach is called Blocking Rendering. To overcome this issue, React 18 introduced Concurrent Mode.
React 18 introduces concurrent rendering and new features such as streaming server rendering, and transitions are powered by concurrent rendering.
All previous versions of React batched multiple state updates only inside event handlers like onClick to avoid multiple re-renders.
React 18 adds automatic batching to improve performance. Now, in the new version of React branches updates the stated in React events handlers, setTimeOut, promises and native event handler, and so on.
React event handlersimport { useState } from "react"; function App() { const [counter, setCounter] = useState(0); const [text, setText] = useState("Before Update"); const handleClick = () => { setCounter(1); setText("After Update"); }; return ( <>After fetch call{counter}
{text}
> ); } export default App;
const handleClick = () => { fetch("YOUR_API_URL").then(()=>{ setCounter(0); setText("After Update") }) };In setTimeOut
const handleClick = () => { setTimeout(() => { setCounter(0); setText("After Update"); }, 5000); };Native event handlers
const el = document.getElementById("button"); el.addEventListener("click", () => { setCounter(count + 1); setText("After Update"); });
The StartTransition API was introduced in React 18. This API helps you to keep your App responsive without blocking your user interaction. React 18 allows you to mark specific updates as transitions.
We can divide the updates into two categories in React:
State updates that are wrapped inside StaratTransition API are considered non-urgent, so they can be suspended or interrupted by urgent updates.
For example, when a user typing in a search input field, two things would happen: a blinking cursor that shows the user is typing and search functionality running in the background that searches the data which is typed.
Here when the user is typing, blinking the cursor is an urgent update, and searching typed data is a non-urgent update.
These non-urgent updates are called transitions. By making non-urgent UI updates, React will know which updates to give more priority.
import { useTransition, useState } from "react"; export default MyApp = () => { const [text, setText] = useState(""); const [pending, startTransition] = useTransition(); const handleChange = (e) => { // urgent update setText(e.target.value); // non-urgent update startTransition(() => { setSearchQuery(e.target.value); }); }; return ( <> {pending &&
Here in the above example, we used the useTransition() hook. This hook returns a Boolean variable value pending which indicates whether the transition is active or inactive. Using pending we can show to the user loading page or loading component.
The useTransition() hook also returns a function startTransition .This function accepts a callback function in which you set the state. The state will not be set or updated immediately.
import { useState, startTransition } from "react"; export default MyApp = () => { const [text, setText] = useState(""); const handleChange = (e) => { // urgent update setText(e.target.value); // non-urgent update startTransition(() => { setSearchQuery(e.target.value); }); }; return ( <> { handleChange(e); }} /> ); };
Here in the above example, we directly imported startTransition from React. While we are using this second approach, this approach does not give Boolean variables like pending to check whether the transition is active or not.
In a client-rendered app, the browser loads the HTML of a page from the server. JavaScript also loads with HTML page to run the page and make it interactive.
If the size of the JavaScript bundle is huge or if the user has a slow connection, then the browser takes more time to load the content and become interactive.
If we use server rendering, then it optimizes the user experience and avoids having to sit on a blank screen.
In the Server rendering technique render the HTML output of React components on the server and send HTML from the server. So, the user can view some UI while JavaScript bundles are loading and before the app becomes interactive.
In React while server rendering one slow component can slow down the entire page. Because we couldn’t tell React to load first other HTML components which are not slow.
React 18 has a new feature Suspense on the server. When we use suspense, we can wrap a slow part of our app within the suspense component, so React does delay to loading of the slow component. We can also specify a loading state that can be shown while it’s loading.
}>
In the above code, we wrapped the <Comments> component in the <Suspense>. So, React not wait for the <Comments> to load, It loads the other rest HTML components of the page. While loading, because we provided the <Spinner> component as a fallback, the HTML for the <Spinner> component will be sent with other HTML components of the page. Users can see spinner while comments are loading.
Once the data fetched for <Comments> component, it’s HTML generated and sent to same <script> tag that will insert <Comments> component to its right place.
First, we have to install react and react-dom from npm or yarn.
npm install react react-dom
or
yarn add react react-dom
In React 18 createRoot is used instead of the render method with ReactDOM.
In React 18 we create a root using the createRoot method and then render the component using this root.
In React 17 code like this below,
import React from 'react'; import ReactDOM from "react-dom"; import App from './App'; ReactDOM.render(, document.getElementById("root") );
In React 18 code like this below,
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render();
To summarize, React 18 will set the foundation for the next generation of releases and will emphasize improving the user's experience. We have briefly explored Concurrency, Automatic batching, startTransition API, and suspense on the server. We have also seen how to upgrade React v17.0 to React v18.o. Adopting new React 18 capabilities would result in reduced JavaScript loading and faster interaction with content.
Build Your Agile Team
Automating processes is crucial for the smooth running of business, whether it is in Legal, healthcare, transport, or Fintech. Several options are accessible to do this. But which...
Despite having abundant options in the market, picking the right technology stack for a software development project is still a challenging task. As you delve deeper into the array...
.NET 5 already has a wealth of performance enhancements and still, there are likely chances to include a lot more improvement before the official release scheduled later this year...