Choosing between useReducer and useState in ReactThere 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 LayersCascading 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 ContextMedia 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 queriesCSS 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 hooksuseEffect 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 2022ECMAScript 2022 is officially a standard now! Let's see what's new in ECMAScript 2022.
Know about the useInsertionEffect hook in React 18The 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 LibraryWith GSAP library, we can create beautiful animations using Tweens, ScrollTrigger, and Timelines
ECMAScript 2022: Ergonomic brand check for private fieldsECMAScript 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 VirtualizationSuper 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, TypedArrayThe 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 accessibleMaking 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 18The 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 hookThe 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 storesThe 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 serverReact 18 introduces a new hook API - useId, that generates stable ids during server rendering and hydration to avoid mismatches.
ECMAScript: Top-level awaitWe 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.
Keep the React app responsive even during large screen updates with startTransition API introduced in React 18The 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 SuspenseReact 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 asynchronouslyReact 17 executes useEffect cleanup functions asynchronously, improving the performance of large applications.
Redux 4.1.0 converts error messages from strings to error code indexesRedux 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 browsersReact 17 removes event pooling in modern browsers as it does not improve the performance and causes confusion.
React 17 stops event bubbling in scroll eventIn React 17 the scroll event no longer bubbles to align with browser's behavior.