Forem: Majedur Rahman

Concurrent Rendering in React ⛽🛣️

Majedur Rahman — Sun, 28 Apr 2024 03:37:47 +0000

In this post, we will discuss the concept of concurrent rendering in React 18, which allows us to improve user experience in new and exciting ways.

So, buckle up, and let's dive into the world of concurrency in React!

What is Concurrency ?

Concurrency means executing multiple tasks at the same time but not necessarily simultaneously. In a concurrent application, two tasks can start, run and complete in overlapping time periods, without waiting for one to finish before starting another. i.e Task-2 can start even before Task-1 gets completed.

Concurrency in React, Explained Simply

In the context of React.js, concurrency refers to having more than one task in progress at once without blocking the main thread, and concurrent tasks can overlap depending on which is more urgent. This is a stark contrast to the traditional, synchronous rendering model where React would block the main thread until it finished rendering the component tree.

For example, while you're writing, you're also preparing vegetables to eat. When the time comes to add ingredients to the vegetables, that will be more urgent, so you'll pause writing and attend to that and come back to continue writing when you're done.
At different points throughout the writing and cooking processes, your focus will be on what is more urgent.

React could only handle one task at a time in the past, and a task could not be interrupted once it had started. This approach is referred to as Blocking Rendering. To fix this problem, Concurrent Mode was introduced—which makes rendering interruptible.

What is Concurrent Rendering in React ?

In the realm of React, concurrent rendering is a game-changer. It's a new way of rendering that helps your app stay responsive under heavy load and gives you more control over how updates get scheduled.
Concurrent rendering is all about creating a fluid user experience. It allows React to interrupt an ongoing rendering process to handle more urgent tasks. This way, even if your app is in middle of a large rendering task, it can still respond immediately to user interactions.

Say Bye to Concurrent Mode

Concurrent Mode was introduced as an experimental feature. In favor of a more logical adoption that allows you to opt in to concurrent rendering at your conveniences. Concurrent Mode is now being replaced in React 18 with concurrent features.

Here's an example to illustrate the difference:

// React 16
ReactDOM.render(<App />, document.getElementById('root'));

// React 18
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

In React 16, we use ReactDOM.render to render our app.
In React 18, we use ReactDOM.createRoot to create a root node and then call render on that root node. This enables concurrent rendering for the entire app.

Concurrent Features in React 18

Let’s look at a few more concurrency features that React 18 introduces.

Automatic batching

React 18 introduces great key feature is automatic batching. which enhances rendering effectiveness, performance and responsiveness.

Batching is when React groups multiple state updates into a single re-render for better performance.

In React 17 and prior, were batched update occur only the state updates defined inside React event handlers. But updates inside of promises, setTimeout, native events handlers, or any other event were not batched in React by default.

Here's the example, React 17 and prior versions:

const [increase, setIncrease] = useState(0);
const [decrease, setDecrease] = useState(0);

const handleOnClick = () => {
     setIncrease(increase + 1)
     setDecrease(decrease - 1)
   };

console.log('Rendering');

return (
    <div className="wrapper">
      <h1>Counter details</h1>
      <p>
        Increase: <strong>{increase}</strong>
      </p>
      <p>
        Decrease: <strong>{decrease}</strong>
      </p>
      <button onClick={handleOnClick}>Click Me</button>
    </div>
  );

In the above example, the handleOnClick() function will be called when a user clicks on the button. It will execute two-state updates on each click.

If you observe the browser console, you will see that the “Rendering” message is logged only once for both state updates.

Now you have seen that React batched updates both states and re-rendered the component only once inside event handler.

But, what if we execute state updates in a context that is not associated with the browser?

For example, consider a setTimeout() call that asynchronously loads data:

  const [increase, setIncrease] = useState(0);
  const [decrease, setDecrease] = useState(0);

  const handleOnClick = () => {
  // updates state inside of setTimeout
    setTimeout(() => {
      setIncrease(increase + 1)
      setDecrease(decrease - 1)
    }, 0)
  }

  console.log('Rendering');

  return (
    <div className="wrapper">
      <h1>Counter details</h1>
      <p>
        Increase: <strong>{increase}</strong>
      </p>
      <p>
        Decrease: <strong>{decrease}</strong>
      </p>
      <button onClick={handleOnClick}>Click Me</button>
    </div>
  );

In the above example, the state update occurs in the callback of setTimeout() function.

If you observe the browser console after executing this example, you will see 2 messages. This indicates that two separate re-renders occur for each state update.

This behaviour can cause severe performance issues related to application speed. That’s why React introduced Automatic Batching.

In React 18 we are introduced to improved version of batching called Automatic Batching. It will enabled batching of all the state updates regardless of where they are called. This includes updates inside promises, timeouts, and native event handlers.

Let’s consider the previous example to understand how automatic batching works:

  const [increase, setIncrease] = useState(0);
  const [decrease, setDecrease] = useState(0);

  const handleOnClick = () => {
  // updates state inside of setTimeout
    setTimeout(() => {
      setIncrease(increase + 1)
      setDecrease(decrease - 1)
    }, 0)
  }

  console.log('Rendering');

  return (
    <div className="wrapper">
      <h1>Counter details</h1>
      <p>
        Increase: <strong>{increase}</strong>
      </p>
      <p>
        Decrease: <strong>{decrease}</strong>
      </p>
      <button onClick={handleOnClick}>Click Me</button>
    </div>
  );

The above example shows an optimal re-rendering process where handleOnClick() function will be called when a user clicks on the button.It will execute two-state updates on each click and give only one re-render as React batches all state updates regardless of the invocation location.

However, Automatic batching significantly reduces rendering iterations, which enhances performance and responsiveness.

SSR with Suspense

Server-side rendering is a technique that allows us to generate HTML from React components on the server and then send a fully rendered HTML page to client. After the HTML is rendered in the browser, the React and JavaScript code for the entire app starts loading. When it is done, It adds interactivity to static HTML generated on the server—a process known as hydration.

Why Suspense ?

In the previous versions of React, hydration could only begin after the entire data had been fetched from the server and rendered to HTML. Additionally, your users couldn’t interact with the page until hydration was complete for the whole page.

To solve this problem, the component was released in 2018. The only supported use case was lazy-loading code on the client, not during server rendering.

Let’s start with how the <Suspense> component works with the lazy loading components.

When using the Suspense component, you must provide a fallback option. It accepts any React components or even a string to render while the lazy component is loading.

Take a look at the example below, which uses the Suspense wrapper to display a typical loader until the <LazyLoadComponent> is ready.

import { lazy, Suspense } from 'react';
const LazyLoadComponent = lazy(
      () => import('./LazyLoadComponent')
);

function MyComponent() {
  return (
    <Suspense fallback={<Loader />}>
      <div>
        <LazyLoadComponent />
      </div>
    </Suspense>
  );
}

Now, let’s take a look at the enhancements Suspense received in React 18.

Suspense is no longer limited to lazy components, React 18 added support for Suspense on the server. React 18 offers two major features for SSR unlocked by Suspense:

1. Streaming Server Rendering

React 18 introduces new server rendering APIs that allow you to stream HTML from the server to the client. This means Streaming HTML is just sending lightweight static HTML. It’s replaced by heavier components that depend, without waiting for the entire response.

<Layout>
  <Article />
  <Suspense fallback={<Spinner />}>
    <Comments />
  </Suspense>
</Layout>

2. Selective hydration

Selective hydration mechanisms decide which components need to be loaded first. React detects events started by the user’s interaction with the component and hydrate certain components first.

If you have multiple Suspense, React will attempt to hydrate all of them but it will start with Suspense found earlier in the tree first.

Transitions

A transition is a new concept in React to distinguish between urgent and non-urgent updates.

Urgent updates reflect direct interaction, like typing, clicking, pressing, and so on.
Transition updates transition the UI from one view to another.

Transitions API gives us an imperative way of marking some update as low priority.

StartTransition API

The startTransition API can be used to mark any state updates as non-urgent. The startTransition API receives a function as argument such that any state updates that occur within this function are marked as a low priority update.

startTransition: a method to start transitions when the hook cannot be used.

In the code block below, there are two state updates- one that is urgent and other is marked as non-urgent as it's wrapped inside the startTransition callback:

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions (non-urgent)
startTransition(() => {
  // Transition: Show the results
  setResults(input);
});

Non-urgent updates will be interrupted if more urgent updates like clicks or key presses come in. If a transition gets interrupted by the user (for example, by typing multiple characters in a row) or start transition is called again before the previous call is completed, React by default cancels older transitions and render only the latest update.

useTransition Hook

React can also track and update pending state transitions using the useTransition hook.

useTransition: a hook to start transitions, including a value to track the pending state.

Invoking const[isPending, startTransition] = useTransition() returns an array of two items:

isPending: indicates that the transition is pending.
startTransition(callback): allows you to mark any UI updates inside callback as transitions or which dispatches a new concurrent render.

As already mentioned, you can use useTransition() hook to let know React which UI updates are urgent (like updating the input field value), and which are non-urgent transitions (like updating the names list to highlight the query).

First, let's invoke the [isPending, startTransition] = useTransition() hook to get access to startTransition() function. Secondly, let's create a state variable to hold the query state value specifically for the transition.

import { useState, useCallback, useTransition } from 'react';

function MyCounter() {
    const [isPending, startTransition] = useTransition();
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        startTransition(() => {
            // Run this update concurrently
            setCount(count => count + 1);
        });
    }, []);

    return (
        <>
            <button onClick={increment}>Count {count}</button>
            <span>{isPending ? "Pending" : "Not Pending"}</span>
            // Component which benefits from concurrency
            <ManySlowComponents count={count} />
        </>
    )
}

An important caveat of useTransition is that it cannot be used for controlled inputs.

const [text, setText] = useState('');
// ...
function handleChange(e) {
  // ❌ Can't use Transitions for controlled input state
  startTransition(() => {
    setText(e.target.value);
  });
}
// ...
return <input value={text} onChange={handleChange} />;

This is because Transitions are non-blocking, but updating an input in response to the change event should happen synchronously. If you want to run a Transition in response to typing, you have two options:

You can declare two separate state variables: one for the input state (which always updates synchronously), and one that you will update in a Transition. This lets you control the input using the synchronous state, and pass the Transition state variable (which will “lag behind” the input) to the rest of your rendering logic.
Alternatively, you can have one state variable, and add useDeferredValue which will “lag behind” the real value. It will trigger non-blocking re-renders to “catch up” with the new value automatically.

For those cases, it is best to use useDeferredValue.

useDeferredValue Hook

The useDeferredValue hook is a React hook that allows you to defer updating a part of the UI. It is a convenient hook for cases where you do not have the opportunity to wrap the state update in startTransition but still wish to run the update concurrently.

An example of where this occurs is child components receiving a new value from the parent.

The useDeferredValue hook is a useful addition to React 18, aimed to improve component rendering performance by preventing unnecessary re-renders.

The useDeferredValue hook takes two arguments:

value: The value you want to defer. It can have any type.
options: An object that can have the 2 properties timeoutMs and scheduler

timeoutMs: The time in milliseconds to wait before updating the value.
scheduler: A function that will be used to schedule the update.

The useDeferredValue hook returns a value that is the deferred version of the value you provided. The deferred value will be updated after the specified amount of time, or immediately if the value changes.

Conceptually, useDeferredValue similar to debouncing, but has a few advantages compared to it. There is no fixed time delay, so React will attempt the deferred render right after the first render is reflected on the screen. The deferred render is interruptible and doesn’t block user input.

Here is an example of how to use the useDeferredValue hook:

import React, { useState, useDeferredValue } from 'react';

const [count, setCount] = useState(0);
  const deferredCount = useDeferredValue(count, {
    timeoutMs: 1000,
  });
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <h1>Counter</h1>
      <p>Current count: {count}</p>
      <button onClick={handleClick}>Click me</button>
      <p>Deferred count: {deferredCount}</p>
    </div>
  );

In this example, the count state variable is updated immediately when the user clicks the button. However, the deferredCount value is not updated immediately. Instead, it is updated after 1000 milliseconds. This means that the deferredCount value will not reflect the latest value of the count state variable until after 1000 milliseconds have passed.

The Future of React with Concurrent Mode

Concurrent mode is not just a new feature, it's a whole new way of thinking about React. It allows React to work on multiple tasks at once, without blocking the main thread. It introduces powerful new features like automatic batching, streaming server rendering, and React Suspense. And it changes how we think about rendering and state updates in React.

So, as we look to the future of React with concurrent mode. Use these new powers to create more responsive, user-friendly apps.

JavaScript: Iterators and Generators (Part-1)💡📌

Majedur Rahman — Wed, 17 Jan 2024 02:16:02 +0000

In JavaScript, iterating through data set or collections objects such as arrays is a very common operation. JavaScript provides a number of ways of iterating over a data-set or collection, from simple forloops to Array.prototype.map() etc.
ES6 introduces a new mechanism for traversing data: iteration. These concepts are central to iteration:

Iterable is a data structure that can be iterated over through iteration.
Iterator is a pointer to the next element in the iteration.
Iterability is an event where data consumers get their data from Iterable data sources with the help of Iterator. Practically not possible to create consumers for all data sources, that’s the reason ES6 introduces Iterable interface/protocol.

So Iterators and Generators provide a mechanism for customizing the behavior of control structures or data-consumers such as for...of loop in JavaScript to iterate over collections in a simple and readable manner. Built-in JavaScript functions and methods, such as Array.prototype.map() or Array.prototype.forEach() to process collections internally use Iterators.

In this article we will cover the below concepts :

1. Iterators.
2. Iterators Interface/Protocol.
3. Iterables.
4. Iterables Interface/Protocol.
5. Custom Iterators.
6. Custom Iterables.
7. Iterators vs Iterables.

Iterators.

What is Iterators?
An Iterator is a structured pattern for pulling information from a source in one-at-a-time fashion. Conceptually, an "iterator" is an object that provides a sequence of values one-at-a-time when requested.

Long story short, iterator is a closure which returns an object having function next(), on each subsequent calling of the next function we get the next iteration value.

Principle of an Iterator

next() : next function returns an object consisting of two keys {value , done}.
{value , done} : Each next execution returns a value but done is returned as false until the iteration is complete(reaches length of the array/ object). Once all the values are iterated the done is returned as true and value turns out to be undefined.
Symbol.iterator: This [Symbol.iterator] is a well-known symbol in JavaScript that defines the default iterator for an object. It is typically implemented as a function that returns the iterator object itself.

To use an iterator you typically call the Symbol.iterator method on a collection or data structure to obtain an iterator object.

Iterators Interface/Protocol

The concept of the protocol can be split into two. The iterable, the data structure itself, and the iterator, a pointer that moves over the iterable.

The iterator interface or protocol defines an standard to produce a sequence of values. This protocol is really an object that contains a next() method and this next() method returns another object with two properties, value and done.

The next() method always returns an object with value and done properties. The value property contains the current value of the iteration and the done property indicates the termination of the iterator.

whenever, any data-source implement the [Symbol.iterator] protocol that produces an iterator and makes the data-structure iterable whenever the data structure in placed in a loop.

Key points about Symbol.iterator :

value of this is a function.
when we call the function associated with Symbol.iterator , it gives us a iterator object.
iterator object returned from Symbol.iterator method has .next method associated it it.
And one each next() call we get the next value along the done status.

We have to iterate one extra time, then only we get done:true.

Custom Iterators
Now, let’s create an custom iterator that returns only the administrators' names. consider true values are admin.



const users = {

    james: false,

    andrew: true,

    alexander: false,

    daisy: false,

    luke: false,

    clare: true,

[Symbol.iterator]() {
    const keys = Object.keys(this);
    let index = 0;

    const iterator = {
         // each call will return a new iterator
        next: () =&gt; {
            while (!this[keys[index]] &amp;&amp; index &lt; keys.length) index++;


            // here the relevant part
            return { 
                done: index &gt;= keys.length,
                // after reading the name corresponding to the current index,
                // do not forget to move forward the 'index'
                // for the next iteration
                value: keys[index++],
            };
        }
    }

    return iterator;
}



}

for (let name of users) {

  console.log(name); //"andrew","clare"

}

Iterables.

What is Iterable?
In general, it is a data structure that allows its data to be consumed. It does so by implementing a method whose key is Symbol.iterator which returns an iterator.

From a technical perspective, an “iterable” isn’t a specific data type in JS. Rather, it’s a protocol that various data types and objects can implement and the JS engine will treat such values as iterables.

Principle of an Iterable

To call any object iterable, it needs to implement the iterable interface.
The iterable object must have a @@iterator method that returns an iterator object. The @@iterator key is a symbol that can be accessed via Symbol.iterator.
The property Symbol.Iterator on an object converts the object into Iterable.
Iterables which can iterate only once (such as Generators) customarily return this from their @@iterator method.
Iterables which can be iterated many times must return a new iterator on each invocation of @@iterator.



let iterable ={

    [Symbol.iterator] : () => {

        //Iterator defination

    }

}

Iterable Interface/Protocol

The iterable protocol allows JavaScript objects to define or customize their iteration behavior. By being an iterable object it needs to implement an @@iterator method (an iterator key), meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant Symbol.iterator, this method needs to returns an iterator protocol.

Whenever an object needs to be iterated (such as at the beginning of a for...of loop), its @@iterator method is called with no arguments, and the returned iterator is used to obtain the values to be iterated.

Custom Iterables.
We are writing an iterable object with will iterate over an array and print the array values.



const iterable = {

  numbers: [1, 2, 3, 4, 5],

[Symbol.iterator]: function () {

    let index = 0;

return {
  next: function () {
    if (index &lt; this.numbers.length) {
      let temp = { value: this.numbers[index], done: false };
      index++;
      return temp;
    } else {
      return { value: undefined, done: true };
    }
  }.bind(this),
};



},

};

for (let i of iterable) {

  console.log(i); // result is: 1,2,3,4,5

}

Iterators vs Iterables.

As discussed above Iterable is an object which consists of an Iterator
Iterator is defined under the key Symbol.Iterator.
Iterator is the action definition of iteration this holds the custom logic of next() function
Next function is called iteratively and as per the protocol it returns value and done keys.

we will discuss about Generators in upcoming blog JavaScript: Iterators and Generators (Part-2).

"That's all folks!"

References:

Books
ES6 & Beyond (YDKJS)-kyle simpson
Images
Google and designed.

JavaScript: The Runtime Environment🏃🏻🏃🏻🏃🏻

Majedur Rahman — Sat, 07 Oct 2023 17:01:34 +0000

So you may know that in JavaScript, your code somehow compiles and executes in your browser or server to display the beautiful application you've built. But are you aware of all the components that come into play to produce the output?

let's dive into deep and see what happens behind the hood in JavaScript and how it's run.

first, we're just glance over the runtime definition.

What's a Runtime?

A runtime is the environment in which a programming language executes. The runtime system facilitates storing functions, variables, and managing memory by using data structures such as queues, heaps and stacks.

JavaScript Runtime Environment

JavaScript runtime environment is like a container, that has all the things to run a JavaScript Code.There are two types of JavaScript runtime environment:

The runtime environment of a Browser (like Google Chrome).
The Node runtime environment.

Every Browser has it's own JS Runtime Environment. The heart of any JavaScript Runtime is always JavaScript Engine. Without an engine there is no runtime and no JavaScript at all.

A JavaScript Runtime consists of the following components-

[🚀] The JS Engine.
[🌏] Web/Global APIs.
[⌛] Callback Queue.
[🔬] Microtask Queue.
[🔄] Event Loop.

Here, we can glimpsed the JavaScript Runtime Environment as a whole in one picture.

1. The JS Engine 🚀
The JavaScript engine, is a vital component of the JavaScript Runtime Environment. Consider it heart of the JavaScript runtime environment. Operating in a single-threaded manner,it executes tasks one at a time, following a specific order. There are a lot of steps involved in doing that, but essentially executing JavaScript code is what an engine does.
Every browser has its own JavaScript engine but the most well known engine is Google's V8. The V8 engine powers Google Chrome but also Node.js which is that JavaScript Runtime.

2. Web/Global APIs 🌏
Web/Global APIs play a crucial role in the JavaScript Runtime Environment by enabiling the execution of tasks in the background, creating the illusion of a multi-threaded environment. It's not part of the JS Engine rather it's crucial part of Runtime environment. These APIs, provided by the browser or the operating system, allow JavaScript to interact with external resources and perform operations asynchronously.

Queue
The queue is an essential part of the JavaScript task scheduling algorithm, which dertermines the order in which tasks are executed by the JavaScript Engine.Both queues hold tasks that are executed asynchronously, but there are some differences in how they work.

3. Callback Queue (Macrotask Queue) ⌛
The Callback Queue also known as the task queue, holds tasks that are pushed to the queue by Web/Global APIs, such as setTimeout,setInterval,XMLHttpRequest, or Events like mouse clicks and keyboard inputs. When the call stack is empty & microtask queue has no priority task, the event loop moves the first task from callback queue to the call stack for execution.
For example:



console.log('script step-1');
setTimeout(() => console.log('script step-2'), 0);
console.log('script step-3');

4. Microtask Queue 🔬
The Microtask Queue, also known as the Job Queue or Promise Queue. It's handle the mutation observer callbacks and promise callbacks. These tasks are scheduled to run after the currently executing script is complete and before the event loop continues with the next task in the task queue.The microtask queue is processed before the callback queue, so the tasks in the microtask queue are given priority over tasks in the callback queue.



console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
});

console.log('script end');

5. Event Loop 🔄
The event loop is a continuous process that constantly checks the call stack and the callback queue,microtask queue. Event loop takes callback functions from the callback queue,microtask queue and puts them in the call stack. So that they can be executed. Also Event Loop is essential for non-blocking concurrency model.

we'll explore the every components from JavaScript Runtime Environment in upcoming posts.
For now, let's end it here.

What is JavaScript ? Why use JavaScript? 🔥🚀

Majedur Rahman — Sun, 12 Jun 2022 18:06:28 +0000

What Is JavaScript? ✨

JavaScript is a high-level programming language. it's originally designed to add interactivity to web pages.

(high-level language means it's closer to human languages and further from machine language).

JavaScript also defined as interpreted, object-oriented, prototype-based, just-in-time compiled, multi-paradigm with dynamic typing programming language. it's one of the core & leading technologies used in the web (world wide web) alongside with HTML and CSS.

A bit of history 🗺️

1995 in the offices of Netscape where the first version of JavaScript was born. At that moment though, Netscape's was one of the most popular web browsers.It's to support it that JavaScript was created, as a companion language to Java.
Back then, the web was fully-static, powered by simple HTML & CSS. JS brought dynamism.
Even after the death of Navigator, it was eventually adopted by all succeeding web browsers, from Explorer to Firefox and Chrome.

JavaScript was born in a hurry though, and various quirks would harm the language adoption in its early years. Still, some of its powerful features were part of it since its inception. These would define JS and allow it to grow.

The next big step following the public release came with ECMA standardization, which became the “convention” behind JavaScript. It brought the language to a broader audience and allowed other potential implementors.

Why do we Need JavaScript? 🚀

JavaScript is a crucial programming language for any web developer.
Without JavaScript, we wouldn’t have the dynamic and interactive web pages that have become the standard user experience we all know.
Initially JavaScript comes as client-side language, which is executed in browsers.but modern JavaScript support up both front-end and back-end in web application development.

In front-end, JavaScript client-side execution of the logic brings faster user experiences. With the code running directly in the browser, the need for server calls is abstracted, hence a cut in loading times. Even with the presence of a server, the fact that JS is asynchronous means that it’s able to communicate with the server in the background without interrupting the user interaction taking place in the front-end.

When it's used for back-end, the Node.js framework allows a server to handle front-end data updates and build scalable network applications to process simultaneous user requests.

Besides front-end & back-end in web, we need JavaScript in mobile app, desktop app development.🔥🔥🔥