JS

Script Loading using Async and Defer

Introduction When it comes to creating production-ready websites, JavaScript is an essential element. It brings websites to life by adding interactivity, dynamism, and a user-friendly experience. Whether you're looking to implement real-time location tracking for a food delivery app or track user traffic with a bar graph on an admin...

by Aayush Mehta
Tag: react
18-Mar-2025

JS

Reduce rendering time with large data in react

Introduction Performance is key in modern web development. Managing efficient rendering becomes crucial as web applications grow in complexity and data volume. One effective technique for improving performance in React applications is virtualization. This article will explore virtualization, why it matters, and how to implement it in a...

by Shivang Garg
Tag: react
18-Oct-2024

React Native

EsLint & Prettier Configuration React Native(Airbnb Style)

This is a step-by-step guide for integrating ESLint and Prettier into a React Native project to ensure code quality and consistent formatting. You are essentially setting up Airbnb's style guide with React-specific configurations and integrating it with Prettier to automatically format the code. Steps Breakdown 1. Install...

by Ajmal Hasan
Tag: react
30-Sep-2024

.NET

Understanding the React Component Lifecycle: Hooks vs. Class Components

Introduction React is a powerful library for developing user interfaces, and one of its key strengths lies in its component model. React components can be written as class components or functional components, and each has a different way of handling the lifecycle of components. This blog will explore the social mechanisms of learning...

by Sachin Kumar
Tag: react
23-Sep-2024

JS

Understanding State Batching in React

Introduction In the world of React, efficient rendering and performance optimization are the keys to success. One of the most important concepts that plays a key role in React state updates is State Batching/Automatic Batching. This mechanism was introduced in React version 18, which significantly impacts the application's performance...

by Aayush Mehta
Tag: react
23-Sep-2024

Drupal

Powering Dynamic Web Apps: Integrating React with Drupal 10 API for Security and Efficiency

Introduction Integrating React with Drupal 10 API is crucial for modern web development, offering a seamless blend of robust backend capabilities and dynamic frontend interfaces. Emphasizing the need for security measures is essential to safeguard user data and ensure smooth functionality. React and Drupal 10: A Powerful Combination ...

by Anurag Nagar
Tag: react
30-Jul-2024

Front End Development, React.js

Creating a Custom Calendar View using React Big Calendar

In the dynamic field of web development, presenting schedules and events in an intuitive and user-friendly manner stands as a pivotal requirement. Enter React Big Calendar, a highly acclaimed scheduler component library renowned for its robust solutions. Offering a plethora of customization options, interactivity, and feature-rich...

by Akash Patel
Tag: react
06-Apr-2024

Node.js, React.js

Feature Flag and its implementation with Launchdarkly

What are Feature Flags? Feature flags (also known as Feature toggles, Release toggles, Feature Bits, Feature flippers, or Feature switches) are a powerful software development technique that allows you to enable or disable a functionality during runtime without changing code or requiring a redeploy. At a code level, feature flags take...

by Deepali Bansal
Tag: react
28-Jan-2024

Front End Development, React.js

A Beginner’s Guide to Redux Toolkit Query/RTK Query

RTK Query is a set of utilities, a powerful data fetching and caching tool. It is an additional package provided by Redux Toolkit that enhances Redux by adding data fetching and caching capabilities.  Data fetching and state management are simple to incorporate in the Redux application by the smooth integration with Redux Toolkit. ...

by Simranjeet Kaur
Tag: react
17-Aug-2023

React.js

React : UseState vs UseRef

With the introduction of functional components in React, state and lifecycle management has become much simpler than it ever was using class-based components. To have the same state, useState hook has provided the most easy-to-use implementation. But do we need useState in all scenarios because each state change causes a rerender of our...

by Abhinav Kumar Singh
Tag: react
05-Apr-2023

Drupal, React.js

Loosely Coupled: Open Drupal Ajax dialog boxes from React via Drupal Behaviour

Dialogs are a quick and easy way to display additional information without reloading the entire page. Dialog boxes can display just some static text, any node or form of your page, a views page, or any custom markup you'll feed them. In order to open some link/node/page in a modal window, you can add the following structure to the link...

by Deepali Bansal
Tag: react
03-Jan-2023

Drupal, React.js

Loosely Coupled: Pass data to React app via drupalSettings

There may be a need to pass a variable, checkbox settings, or some global settings from drupal to react. This can be achieved by passing data from drupal into an API and consuming the same API in react. But why call an extra API when we can achieve it without it? We will be using #attached/drupalSettings to accomplish this. Step 1:...

by Deepali Bansal
Tag: react
29-Dec-2022