Choosing between useReducer and useState in React
There is a lot of confusion while choosing the state management methods. One of them is 'When to use useReducer versus useState?'. In this blog, we will discuss the points to help select between 'useState' and 'useReducer'.Control the specificity and order of styles with CSS Cascading Layers
Cascading layers is a new feature in CSS to maintain and order the stylesheet in which we can cascade and organize the CSS more efficiently.Evaluating Media queries in a Range Context
Media Queries Level 4 specification has introduced a new syntax for writing media queries that have a range type. We can now use common mathematical comparison operators like <, >,<=, >= instead of min/max prefixes.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 TimelinesECMAScript 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.