Articles by Chetan Gawai

Meet the most awaited CSS container queries

CSS container queries are similar to media queries, but related to a container element size rather than the viewport size.

Understanding the difference between React useEffect and useLayoutEffect hooks

useEffect hook and useLayoutEffect hook differ in the timing of their invocation. useEffect hook runs asynchronously after the DOM has been painted whereas useLayoutEffect runs synchronously after all DOM mutations.

Ecma International approves ECMAScript 2022

ECMAScript 2022 is officially a standard now! Let's see what's new in ECMAScript 2022.

How to Copy Text and Images to Clipboard in Javascript?

The Clipboard API helps to copy text and images to the clipboard asynchronously without affecting the performance of the application.

Know about the useInsertionEffect hook in React 18

The useInsertionEffect hook in React 18 is mostly for CSS-in-JS libraries for inserting global DOM nodes like 'style' or SVG 'defs' in the document.

React 18 allows components to render 'undefined'

Before React 18, if we did not want to render anything, we had to return 'null' or an empty fragment. React now allows undefined to be rendered.

Step-by-step guide to GSAP Library

With GSAP library, we can create beautiful animations using Tweens, ScrollTrigger, and Timelines

ECMAScript 2022: Ergonomic brand check for private fields

ECMAScript 2022 provides a simpler way to check if an object has a given private field using the 'in' operator.

Sneak peak into the workstation of Saeloun team!

Saeloun has been remote since it started. We asked our team to share a photograph of their workstation.

Improve the performance of dropdown containing large data using Virtualization

Super large lists can slow down the site's performance significantly, at times even freeze the application. In such situations windowing (or virtualization) comes to the rescue.

ECMAScript 2022 introduces at() method in Array, String, TypedArray

The at() method takes an integer value and returns the element at that index. It allows both positive and negative integers. Negative integers denote counting back from the last item in the array.

How to integrate Google Analytics with React JS application?

Step-by-step guide on setting up and adding Google Analytics to React application.

Tips to make React application more accessible

Making web applications accessible to all the users is an important aspect to be considered while developing. React fully supports building accessible websites, often by using standard HTML techniques.

Deep dive into the new Suspense Server-side Rendering ( SSR ) architecture in React 18

The new SSR foundation allows us to combine streaming server-side rendering with a new approach to hydration - Selective Hydration! It also prioritizes hydrating the parts the user is interacting with, creating an illusion of instant hydration.

Sneak peek into React 18 useDeferredValue hook

The useDeferredValue hook allows us to mark some tasks as less important, making the app feel more responsive, thereby improving the user experience.

Meet the new hook useSyncExternalStore, introduced in React 18 for external stores

The most significant update of React 18 comes with concurrent rendering. However, with the external store, there are some issues(tearing) that come up with concurrent rendering. To fix these issues, React 18 provides a new hook, useSyncExternalStore.

Understanding Hydration in React applications(SSR)

Hydration is used only with server-side rendering (SSR). It is a process of rendering our components and attaching event handlers.

React 18 provides useId API for generating unique IDs on both the client and server

React 18 introduces a new hook API - useId, that generates stable ids during server rendering and hydration to avoid mismatches.

ECMAScript: Top-level await

We can only use await operator within an async method. In ECMAScript 2022 we will be able to use it outside of the context of an async method in our modules.

Understanding static class features in JavaScript (ECMAScript 2022)

Private and public static fields along with private static methods would be officially included in ECMAScript 2022.

Deep dive into public and private instance fields in JavaScript (ECMAScript 2022)

Class fields declaration allows declaring fields, up-front making class definitions become more self-documenting. As declared fields are always present, instances go through fewer state transitions. These class fields features would be officially included in ECMAScript 2022.

Keep the React app responsive even during large screen updates with startTransition API introduced in React 18

The newly introduced startTransition API helps to improve the user interactions by categorizing the state updates as urgent and non-urgent.

React 18 improves the existing behavior of Suspense

React 18 delays committing everything inside the Suspense boundary (the suspended component and all its siblings) until the suspended data resolves.

React 18 introduces new root API ( ReactDOM.createRoot )

React 18 adds the new root API that comes up with the new out-of-the-box improvements.

React 17 runs useEffect cleanup functions asynchronously

React 17 executes useEffect cleanup functions asynchronously, improving the performance of large applications.

Redux 4.1.0 converts error messages from strings to error code indexes

Redux 4.1.0 extracts error messages from production build, converts them into error code indexes, thereby shrinking the bundle size.

React 17 removes event pooling in the modern browsers

React 17 removes event pooling in modern browsers as it does not improve the performance and causes confusion.

React 17 stops event bubbling in scroll event

In React 17 the scroll event no longer bubbles to align with browser's behavior.