DEV Community: Sanjampreet Singh

Hashing to the Rescue: A React Performance Story

Sanjampreet Singh — Tue, 17 Dec 2024 14:25:49 +0000

Recently, I tackled a performance bottleneck in my React app. The culprit? Frequent re-renders of a complex component that displayed a large list of items. Even minor data changes were triggering a cascade of unnecessary updates, slowing down the UI.

Solution? Hashing!

I implemented a hashing function to generate a unique key for each item in the list. This key was based on the item's data, so if the data didn't change, the hash remained the same.

By passing this hash as the key prop to each list item, React could efficiently identify which items had actually changed and only re-render those specific components.

The result? A significant boost in performance and a much smoother user experience!

Here's a simplified example:

const items = [
  { id: 1, name: 'Item A', data: '...' },
  { id: 2, name: 'Item B', data: '...' },
  // ... more items
];

const generateKey = (item) => {
  // Use a hashing function (e.g., MD5, SHA-1) 
  // to generate a unique key based on item.data
  return hash(item.data); 
};

const renderItems = () => {
  return items.map((item) => (
    <ListItem key={generateKey(item)} item={item} />
  ));
};

Key takeaways:

Hashing can be a powerful technique for optimizing React app performance.
By generating unique keys for dynamic components, you can help React identify and re-render only the necessary elements.
This approach minimizes unnecessary re-renders and improves overall UI responsiveness.

Have you used hashing for performance optimization in your projects? Share your experiences in the comments!

If you like what you read, consider connecting with me on LinkedIn

Step-by-Step Guide to Setting Up Push Notifications in Node.js: Backend Configuration

Sanjampreet Singh — Sun, 30 Jun 2024 12:15:52 +0000

Introduction to Push Notifications

Push notifications are a powerful way to keep users engaged by delivering timely and relevant information directly to their devices. Unlike traditional pull mechanisms where the client requests information from the server, push notifications allow the server to send updates to the client without the client explicitly requesting it.

In this three-part series, we'll guide you through setting up push notifications from scratch using Node.js, without relying on third-party services. In this first part, we'll focus on setting up the backend to handle push notifications.

Understanding the Architecture

Before diving into the code, let's understand the architecture and key components involved in implementing push notifications.

What is VAPID ?

Voluntary Application Server Identification(VAPID) is a method for identifying your application server to push services(e.g., Google, Mozilla) without requiring a third - party authentication service.VAPID provides a way to include your server's identity in the push message, allowing push services to validate and associate the message with your server.

How Does the HTTP Push Protocol Work ?

The HTTP Push Protocol is an extension of HTTP / 2 that allows servers to send unsolicited responses(push messages) to clients.Here’s a simplified flow of how it works:

Subscription: The client subscribes to push notifications through the Push API and receives an endpoint URL, along with cryptographic keys.
Send Push Message: The server uses the endpoint URL and keys to send a push message to the push service.
Delivery: The push service delivers the message to the client’s browser, which then displays the notification using the Service Worker API.

Setting Up the Backend

Let's set up a Node.js backend to handle push notifications. We'll use Express for our server, Sequelize for interacting with an SQLite database, and web - push for sending notifications.

Step - by - Step Guide to Implementing Push Notifications

Step 1: Initialize the Project

First, create a new Node.js project and install the necessary dependencies.



npm init -y
npm install express sequelize sqlite3 web-push dotenv
npm install --save-dev typescript @types/node @types/express

Step 2: Set Up Environment Variables

Create a .env file to store your VAPID keys:



VAPID_PUBLIC_KEY=your_public_key
VAPID_PRIVATE_KEY=your_private_key

Step 3: Initialize Sequelize

Create a src/models/index.ts file to initialize Sequelize and connect to the SQLite database.



import { Sequelize } from 'sequelize';

const sequelize = new Sequelize({
  dialect: 'sqlite',
  storage: './data.db'
});

export default sequelize;

Step 4: Define the Subscription Model

Create a src/models/subscription.ts file to define the subscription model.



import { DataTypes, Model } from 'sequelize';
import sequelize from './index';

class Subscription extends Model {
  public id!: number;
  public endpoint!: string;
  public p256dh!: string;
  public auth!: string;
}

Subscription.init({
  id: {
    type: DataTypes.INTEGER,
    autoIncrement: true,
    primaryKey: true
  },
  endpoint: {
    type: DataTypes.STRING,
    allowNull: false
  },
  p256dh: {
    type: DataTypes.STRING,
    allowNull: false
  },
  auth: {
    type: DataTypes.STRING,
    allowNull: false
  }
}, {
  sequelize,
  tableName: 'subscriptions'
});

export default Subscription;

Step 5: Set Up the Service Layer

Create a src/services/subscriptionService.ts file to handle subscription and notification logic.



import Subscription from '../models/subscription';
import webPush from 'web-push';

// Configure VAPID keys
const vapidKeys = {
  publicKey: process.env.VAPID_PUBLIC_KEY!,
  privateKey: process.env.VAPID_PRIVATE_KEY!
};

webPush.setVapidDetails(
  'mailto:your-email@example.com',
  vapidKeys.publicKey,
  vapidKeys.privateKey
);

export const saveSubscription = async (subscription: any): Promise<void> => {
  await Subscription.create({
    endpoint: subscription.endpoint,
    p256dh: subscription.keys.p256dh,
    auth: subscription.keys.auth
  });
};

export const sendNotification = async (title: string, body: string, image: string): Promise<void> => {
  const subscriptions = await Subscription.findAll();
  subscriptions.forEach((subscription) => {
    const sub = {
      endpoint: subscription.endpoint,
      keys: {
        p256dh: subscription.p256dh,
        auth: subscription.auth
      }
    };
    const payload = JSON.stringify({
      notification: {
        title,
        body,
        image,
      },
    });
    webPush.sendNotification(sub, payload)
      .catch(error => console.error('Error sending notification:', error));
  });
};

Step 6: Create API Routes and Controllers

Create src/api/controllers/subscriptionController.ts for handling API requests.



import { Request, Response } from 'express';
import { saveSubscription, sendNotification } from '../../services/subscriptionService';

export const subscribe = async (req: Request, res: Response) => {
  try {
    const subscription = req.body;
    await saveSubscription(subscription);
    res.status(201).json({ message: 'Subscription added successfully.' });
  } catch (error) {
    res.status(500).json({ message: 'Failed to subscribe.' });
  }
};

export const pushNotification = async (req: Request, res: Response) => {
  try {
    const { title, body, image } = req.body;
    await sendNotification(title, body, image);
    res.status(200).json({ message: 'Notification sent successfully.' });
  } catch (error) {
    res.status(500).json({ message: 'Failed to send notification.' });
  }
};

Create src/api/routes/subscriptionRoutes.ts to define the API routes.



import { Router } from 'express';

import { subscribe, pushNotification } from '../controllers/subscriptionController';

const router = Router();

router.post('/subscribe', subscribe);

router.post('/push', pushNotification);

export default router;

Step 7: Initialize the Server

Create src/index.ts to set up the Express server and initialize the database.



import express from 'express';

import cors from 'cors';

import helmet from 'helmet';

import subscriptionRoutes from './api/routes/subscriptionRoutes';

import sequelize from './models/index';

import dotenv from 'dotenv';

dotenv.config(); // Load environment variables from .env

const app = express();

const PORT = process.env.PORT || 3000;

app.use(cors());

app.use(helmet());

app.use(express.json());

app.use('/api', subscriptionRoutes);

sequelize.sync().then(() => {

  app.listen(PORT, () => {

    console.log(Server is running on http://localhost:</span><span class="p">${</span><span class="nx">PORT</span><span class="p">}</span><span class="s2">);

  });

}).catch ((err) => {

  console.error('Unable to connect to the database:', err);

});

Summary

In this first part of our series, we've set up the backend for push notifications using Node.js. We've covered the basics of push notifications, the architecture, and provided a step-by-step guide to implementing the backend. In the next part, we'll dive into setting up the frontend to handle push notifications and subscribe users.

If you like what you read, consider connecting with me on LinkedIn

Stay tuned for Part 2 - Client Side!

Webinar about web development

Sanjampreet Singh — Tue, 11 Jun 2024 12:04:18 +0000

Hello everyone,

I am hosting my first webinar on Zoom this coming Saturday about getting started as a web developer.

In this session, I will provide an introduction to web development, a roadmap for upskilling, discuss industry trends, and possibly conduct a demo. Additionally, I'll share what motivates me to keep working in this field.

Date: 📅 15 June
Time: ⏰ 4 PM IST
Platform: Zoom

Registration Link - https://forms.gle/Qq9oQzv6ai1PuT5j6

Looking forward to seeing you all there!

Component-Driven Development with ReactJS: Leveraging Storybook, Figma, and MUI

Sanjampreet Singh — Sun, 31 Mar 2024 07:15:23 +0000

Component-Driven Development (CDD) signifies a transformative approach in web development, emphasizing the modular construction of user interfaces through reusable components. At the heart of this methodology lies ReactJS, renowned for its efficient rendering and the encapsulation of components, making it an ideal foundation for CDD.

This article dives into concept of integrating tools like Storybook, Figma, and Material-UI (MUI) within a ReactJS framework can revolutionize the development workflow, enhance collaboration, and refine the end product.

The Core of Component-Driven Development

CDD revolves around the modular design of UI elements, wherein each component is developed and maintained as an independent unit.

This strategy fosters improve the code quality, simplifies maintenance, and accelerates the development lifecycle.

ReactJS component-based architecture aligns perfectly with CDD, offering a structured environment for crafting scalable and maintainable applications.

ReactJS: The Base of CDD

ReactJS stands as a cornerstone for CDD, promoting the creation of independent, state-managing components.

This granularity not only streamlines development but also ensures a component’s functionality and appearance are tightly coupled, facilitating a more intuitive development process.

Storybook: A Canvas for Components

Storybook emerges as a pivotal tool in the CDD arsenal, providing a dedicated environment for developing and visualizing UI components outside the main application.

This isolation technique is instrumental in fine-tuning components, enabling developers to iterate rapidly without impacting the entire project.

The advantages of using Storybook are:

Component Visualization: Instant feedback on changes to components accelerates the refinement process.
Documentation: Acting as a live documentation platform, Storybook aids in onboarding and aligns team members on component capabilities and usage.
Enhanced Collaboration: By offering a visual representation of components, Storybook bridges communication gaps between designers and developers, streamlining the design-to-development transition.

Figma: The Nexus of Design and Development

Figma stands out as a collaborative design tool that seamlessly integrates with the development workflow.

It facilitates real-time collaboration between designers and developers, ensuring that UI designs are accurately translated into code.

The synergy between Figma and ReactJS components underlines the seamless transition from concept to implementation, embodying the principles of CDD.

MUI: Elevating UI Design with Material Concepts

Material-UI enriches the React ecosystem by providing a comprehensive suite of pre-designed components based on Material Design principles.

MUI's integration into a React project accelerates UI development while maintaining consistency, accessibility and responsiveness across the application.

Benefits of using MUI are:

Aesthetic Consistency: MUI components adhere to Material Design guidelines, promoting a cohesive look and feel.
Development Efficiency: The extensive component library significantly reduces development time, allowing teams to concentrate on business logic.
Customizability: MUI offers extensive theming capabilities, enabling developers to tailor components to align with specific design requirements.

Integrating Storybook, Figma, and MUI in ReactJS Projects

The combination of Storybook, Figma, and MUI within a ReactJS
ecosystem creates an unparalleled framework for executing CDD.

This integrated approach facilitates a streamlined, collaborative development process where:

Design Phase: Designers conceptualize UI components in Figma, establishing a comprehensive design system.
Development Phase: Developers transform Figma designs into React components, leveraging MUI for material-inspired elements and refining them within Storybook to ensure alignment with design specifications.
Integration Phase: Components perfected in Storybook are seamlessly integrated into the main application, guaranteeing that the final product reflects the envisioned design with fidelity and functional integrity.

Summary

The adoption of Component-Driven Development, powered by ReactJS and strengthened by the integration of Storybook, Figma, and MUI, opens forth a new era of web development.

This methodology not only streamlines the development process but also fosters a collaborative ecosystem between designers and developers, culminating in applications that are both visually compelling and highly functional.

As the digital landscape continues to evolve, embracing these tools and methodologies will be paramount in crafting user experiences that stand the test of time.

Tailwind css + Primitive component libraries: React UI's future?

Sanjampreet Singh — Mon, 28 Aug 2023 12:18:55 +0000

I've been playing around with Tailwind CSS and it's fantastic, however there are some limitations, such as developing custom components.

I am not stating that with Tailwind CSS, you cannot create custom components, but for a large scale project with tight deadlines, it's a lot of work, and you can't cover all edge cases such as accessibility, performance, and browser support, etc.

Hence, I believe Tailwind css combined with primitive component libraries are the future of React UI development. Let's discuss this topic below.

Current paradigm of UI development in React

Currently, you are using MUI, Bootstrap, Ant UI, Chakra UI, and other components in React. These are wonderful libraries for designing web apps since they get much of the job done while making our lives easier until a custom design language is required. As these follow an opinionated design language.

Adding new design language (i.e. custom theme, look and feel of components, etc.) is essentially the same as writing custom CSS on top of an already existing theme. This is still possible by using the theme builders (which, by the way, only a few offer) provided by these UI libraries, but not everything is possible.

Also, using these libraries increase the bundle size unnecessary.

How Tailwind CSS can be helpful?

You can find multiple articles online on Tailwind CSS merits and demerits, but in the case of creating custom design this library can be a great tool.

Faster development because you are using it inside JSX/JS files only.
In a team environment, there is no overwriting of styles making it almost bug free.
No duplication of css classes, making bundle size smaller when built.

There are many other benefits that can be explored when using Tailwind CSS.

Primitive components — A new and different paradigm in React UI

Primitive components - Components that are accessible but without styling, so you can personalise them anyway you want.

These are more like skeletons without css. Basically providing you with HTML like elements but without any opinionated design language.

These components are well tested on multiple browsers, platforms, and devices and deals with edge cases like focus management, keyboard navigation, event listeners, accessibility attributes, valid markup and screen reader support.

If you had to build these components from the ground up, could you even account for all the edge cases?

Some of the popular headless libraries are - Radix UI, Headless UI, React Aria by Adobe etc.

Conclusion

Use primitive components in projects where you have extremely specific design requirements

Another advantage is that it changes the way you create React components in general — isolating logic and functionality from the user interface.

My advice is to become acquainted with the concept of headless components and see if it can be used to your project's use case.

If you like what you read, consider connecting with me on LinkedIn

In case you want to get started with primitive components, I recommend this video on YouTube.

Simplifying API Calls with URLSearchParams and Fetch

Sanjampreet Singh — Tue, 08 Aug 2023 18:16:13 +0000

Have you ever had to deal with complicated query parameters while using GET API calls?

Introducing URLSearchParams, a JavaScript interface that makes it simple to manage query parameters.

Let's explore how it might raise the bar for your Fetch method use.

// Create a new URLSearchParams object
const params = new URLSearchParams({
    'search': 'keyword',
    'filter': 'category',
    'sort': 'date'
});

// Combine with your API endpoint
const apiUrl = `https://api.example.com/data?${params}`;

// Fetch the data
fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    // Handle your data here
  })
  .catch(error => {
    // Handle errors
  });

URLSearchParams: We may create, modify, and manage query parameters within URLs using this convenient interface. It is ideal for writing exact API calls without manually adding '&' and '=' symbols.
Use URLSearchParams to generate a clean, well-organized parameter string rather than manually concatenating strings.

Benefits of using URLSearchParams

Clean code: No more manual parameter concatenation!
Readable: Easily understand query parameters at a glance.
Dynamic: Add, remove, or update parameters effortlessly.

If you like what you read, consider connecting with me on LinkedIn

How can I optimize my HUGE enterprise application? - React JS

Sanjampreet Singh — Thu, 11 May 2023 14:02:11 +0000

Have you ever experienced slow app loading as the code base grows? Do you wonder that for your SPA, you can chunk code into different files? Is this even possible? React does have a solution.

Lazy Loading

Components are loaded using the lazy loading technique only when they are required. By decreasing the amount of JavaScript that needs to be downloaded and the initial load time, this can help your React app perform better.

There are two main ways to lazy load components in React:

Using the react.lazy() function
Using the Suspense component

Using `react.lazy()`

The react.lazy() function allows you to load a component in chunks by providing the path to the component's file. For example:

const MyComponent = react.lazy(() => import('./MyComponent'));

Once the component has been loaded, it can be used like any other component.

Using `Suspense`

The Suspense component is a higher-order component that allows you to wrap lazy loaded components. It takes a fallback prop that is rendered while the component is loading. For example:

const MyComponent = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyLazyComponent />
    </Suspense>
  );
};

Why should `lazy()` not be called inside a component?

It is important to note that the react.lazy() function should not be called inside a component. This is because the component will not be able to be loaded until the parent component has finished loading. If the parent component is slow to load, the child component will not be able to load either.

To avoid this, you should call the react.lazy() function in the top-level component of your app.

Also, this component will rerender multiple time, which is not good for performance.

Benefits of lazy loading

There are several benefits to lazy loading components in React:

Improved performance: By decreasing the amount of JavaScript that needs to be downloaded and the initial load time, lazy loading can help your React app perform better.
Reduced bundle size: Lazy loading can help to reduce the size of your app's bundle by only loading the components that are needed. This can make your programme load faster and use less memory.
Better user experience: Lazy loading can improve the user experience of your app by only loading the content that the user is actually seeing. Users may have to wait less time for content to load as a result of this.

Conclusion

Your React app's performance and user experience can be enhanced by using the potent technique of lazy loading.

Here's a Code example

import React, { lazy, Suspense } from "react";

const MyLazyComponent = lazy(() => import("./MyComponent"));

const App = () => {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyLazyComponent />
    </Suspense>
  );
};

export default App;

Writing Modular code in ReactJS

Sanjampreet Singh — Mon, 08 May 2023 15:09:38 +0000

It could become challenging to maintain and modify the code when a React application expands in size and complexity. Writing modular code can help you avoid repeating code and make it easier to manage and maintain.

In this article, we'll discuss some tips for writing modular code in React.

Divide Your Code into Smaller Components

Dividing your code into smaller, reusable components is one of the best ways to write modular code in React. Each component in your application should stand for a single, independent piece of functionality that can be applied to various parts of the system.

You could make separate components for the form fields, form submission, and error handling, for instance, if you have a registration form. It is simpler to change and maintain because each component can be developed and tested independently.

Use Higher-Order Components

Functions that take a component as an argument and return another component are known as higher-order components (HOCs). They can be used to enhance a component's functionality or alter its behaviour without changing its source code.

For instance, you could develop a HOC that wraps a component and, prior to rendering, adds authentication or authorization checks. Your code will become more modular as a result of being able to reuse the authentication and authorization logic across various components.

const requireAuthentication = (Component) => {
  const isAuthenticated = true; // Replace with actual authentication check

  return isAuthenticated ? <Component /> : <p>Please log in to access this page.</p>;
};

const HomePage = () => {
  return <div>Welcome to the home page!</div>;
};

export default requireAuthentication(HomePage);

Use React Hooks

React Hooks were introduced in version 16.8 to give functional components a way to use state and other React features. By enabling the reuse of stateful logic across multiple components, hooks can assist you in writing more modular code.

You could, for instance, create custom hook that retrieves information from an API and provides the data and the loading state to any component that uses it.

import { useState, useEffect } from "react";

const useFetchData = (url) => {
  const [data, setData] = useState(null);
  const [isLoading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    };

    fetchData();
  }, [url]);

  return { data, isLoading };
};

const UserList = () => {
  const { data, isLoading } = useFetchData("https://jsonplaceholder.typicode.com/users");

  if (isLoading) {
    return <p>Loading...</p>;
  }

  return (
    <ul>
      {data.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

Use React Context

React Context allows you to pass data down the component tree without having to pass props through each level of the tree. This allows you to encapsulate and reuse logic across multiple components, making your code more modular.

You can, for example, create a UserContext context that makes the user data available to any component that uses it.

import React, { createContext, useContext } from "react";

// Create a new context for the user data
const UserContext = createContext();

// Create a new component that will hold the user data
const UserProvider = ({ children }) => {
  const user = { name: "John Doe", email: "john.doe@example.com" };
  return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
};

// Create a new component that will use the user data
const Profile = () => {
  // Use the useContext hook to access the user data
  const user = useContext(UserContext);

  return (
    <div>
      <h2>Profile</h2>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
};

// Render the components
const App = () => {
  return (
    <UserProvider>
      <Profile />
    </UserProvider>
  );
};

In this example, the UserProvider component is responsible for holding the user data and making it available to any child components that need it. The Profile component is a child component that uses the useContext hook to access the user data from the UserContext context.

By wrapping the Profile component in the UserProvider, the user data can be accessed by any child components without the need for prop drilling.

Some more methods (not react specific)

Other than the above method, you could always follow some of the suggestions:

Using Component Libraries - Component Themes are an excellent way to ensure consistency throughout your entire React application. You can define a set of styles for all your components and then reuse those styles throughout your code.
Common Constants - You can also define common constants that will be used throughout your React app. For example, if you're developing a shopping cart app, you might want to define constants for product prices and shipping rates.
Utils functions - Defining some reusable logics, like data conversions or date formatter method to bring consistency across your application.

Conclusion

Writing modular code in React can be difficult, but it is necessary for creating scalable and maintainable applications. It may take more time up front, but it saves time and effort later on by making development, testing, and debugging faster and easier. Developers can write high-quality, maintainable, and efficient ReactJS code that is simple to understand, test, and maintain by following the suggestions provided in this post.

Why async callback cannot happen in React useEffect hook?

Sanjampreet Singh — Wed, 03 May 2023 13:24:48 +0000

One common issue that developers experience when utilising the ReactJs useEffect hook is understanding why async callbacks cannot be utilised within the hook. Let's explore the reasons for this restriction along with some code examples.

Understanding the useEffect hook

Before we get into why async callbacks can't be utilised in the useEffect hook, let's go over what it does. The 'useEffect' hook is used to handle a component's side effects. Side effects are any operations performed by a component that are not related to rendering, such as retrieving data from an API or modifying the page title.

The useEffect hook enables us to perform these side effects in a clean and straightforward manner. When a component mounts, changes, or unmounts, we can define a function to be executed. The "effect" is the function supplied as the first argument to the useEffect hook.

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In the example above, the useEffect() hook is used to update the document paragraph tag <p> based on the count state variable.

Why async callbacks cannot be used in useEffect

Let's understand the reasons why an asynchronous callback function cannot be called directly from a useEffect() hook. This is because the useEffect hook expects its effect function to return either a cleanup function or nothing at all. This is due to the useEffect() hook's callback function's asynchronous execution and lack of blocking. Therefore, we must follow a specific pattern if we want to call an asynchronous function inside the useEffect() hook.

The special pattern is to create a new function that is declared inside the useEffect() hook and that contains the async function, and then we can call this new function inside the useEffect() hook. Here's an example:

import React, { useEffect } from 'react';

function App() {
  useEffect(() => {
    async function fetchData() {
      const response = await fetch('https://example.com/data');
      const data = await response.json();
      console.log(data);
    }

    fetchData();
  }, []);

  return <div>Hello World</div>;
}

In this example, a brand-new function called "fetchData()" has been developed and is declared inside the "useEffect()" hook. The asynchronous code that we want to execute is contained in this function. Then, to make sure that it only executes once when the component mounts, we call this function from within the "useEffect()" hook and pass an empty dependency array as the second argument.

By using this pattern, we can ensure that the asynchronous function runs as expected without any issues.

Conclusion

As a result, since useEffect() is an asynchronous, non-blocking function, async callbacks cannot be made directly inside of it. To make sure the asynchronous code executes as intended, we can use a different way that declares a new function inside the "useEffect()" hook.

Are React Hooks simply a replacement for React Lifecycle Methods?

Sanjampreet Singh — Sun, 30 Apr 2023 07:13:38 +0000

When working with React, you must understand both React Lifecycle Methods and React Hooks. While React has had Lifecycle Methods since the beginning, React Hooks were introduced in React 16.8 as a way to reuse stateful logic and reduce code complexity in functional components. It is important to note, however, that React Hooks and React Lifecycle Methods are not interchangeable and do not have the same relationship.

React Lifecycle Methods are classified into two types based on their lifecycle phase:

Class component lifecycle methods: componentDidMount, shouldComponentUpdate, componentWillUnmount, etc.
Functional component lifecycle methods: useEffect, useLayoutEffect, useMemo, etc.

React Lifecycle Methods

React Lifecycle Methods are methods that are called at various points in the lifecycle of a component. A React component's lifecycle is divided into three stages:

Mounting phase: where the component is created and added to the DOM.
Updating phase: where the component is updated with new data or props.
Unmounting phase: where the component is removed from the DOM.

React Hooks

React Hooks are functions that allow you to use state and other React features without the need for classes in functional components. They're used to reuse stateful logic while also keeping components simple and reusable. The following are some of the most common React Hooks:

useState: used to add state to functional components.
useEffect: used to add lifecycle functionality to functional components.
useContext: used to access context in functional components.

How React Hooks Don't Relate to Lifecycle Methods

While it may appear that React Hooks are simply a replacement for React Lifecycle Methods, this is not the case. React Hooks are used to manage state and logic within functional components, whereas Lifecycle Methods are associated with class component lifecycle phases.

In a class component, for example, componentDidMount would be called after the component was mounted, whereas in a functional component, the equivalent functionality would be achieved by using useEffect.

Conclusion

In conclusion, while React Lifecycle Methods and React Hooks are both important concepts to grasp in React, they do not have the same relationship. Lifecycle Methods are connected to the lifecycle stages of class components, whereas React Hooks are a means to reuse stateful behaviour and keep components simple and reusable. Understanding the distinctions between these notions will help you build more readable and efficient React code.

Code example using a lifecycle method:

import React, { Component } from 'react';

class ExampleComponent extends Component {
  componentDidMount() {
    console.log('Component has mounted!');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

export default ExampleComponent;

Code example using a hook:

import React, { useEffect } from 'react';

function ExampleComponent() {
  useEffect(() => {
    console.log('Component has mounted!');
  }, []);

  return <div>Hello, World!</div>;
}

export default ExampleComponent;

In the above example, the componentDidMount lifecycle method is replaced with the useEffect hook. The useEffect hook takes a function as its first argument and an array of dependencies as its second argument. In this case, the second argument is an empty array, which means that the function will only be called once when the component mounts.

Unlocking the Secrets of React Hooks

Sanjampreet Singh — Thu, 27 Apr 2023 18:37:57 +0000

What are React Hooks?

React Hooks were introduced in React 16.8. They allow developers to use state, context, and other React features in functional components instead of class components. Hooks are functions that allow you to "hook into" React's internal state and lifecycle features. This provides an alternative method for creating React components while also simplifying the overall React codebase. Developers can use hooks to create reusable, modular code that is easier to understand, test, and maintain.

How React Hooks Work Under the Hood

React Hooks enable developers to use state and other React features without the use of class components within functional components. Hooks are JavaScript functions that provide a way to manage state and perform side effects within functional components, such as useState() and useEffect(). When a hook-enabled component is rendered, React creates an internal object to store the state and connects it to the component. React updates the internal state object and re-renders the component when the state is updated via the hook. useEffect hooks are executed after each render and can be used to perform side effects such as data retrieval or DOM manipulation. To encapsulate logic that can be reused across multiple components, custom hooks can be created. Overall, React Hooks enable developers to write more modular and maintainable code by allowing them to use React features in functional components in a powerful and flexible manner.

State and Effect Hooks in React

The useState() and useEffect() functions are the most commonly used React Hooks. The useState() function allows developers to manage state within functional components, whereas the useEffect() function allows them to perform side effects within functional components. The useState() function accepts a starting value and returns an array containing the current state value as well as a function to update the state. React will re-render the component and update the UI when the state is updated using the function returned by useState(). The useEffect() function takes as an argument a callback function and executes it after each render. This enables developers to perform side effects such as data fetching or DOM manipulation without causing unnecessary re-renders. The useEffect() function allows developers to specify dependencies and control when the effect runs. Developers can easily manage state and perform side effects within functional components by using the useState() and useEffect() functions, eliminating the need for class components.

Creating Reusable Logic with Custom Hooks in React

Custom Hooks are JavaScript functions that enable developers to extract component logic and store it in reusable functions. They allow you to share common functionality across multiple components without having to duplicate code. Custom Hooks are capable of encapsulating any stateful or side-effecting logic that can be reused across components. They are implemented as regular JavaScript functions that make use of either built-in React Hooks or custom Hooks. Custom Hooks should be named with the word "use" to indicate that they are Hooks and can be used in function components. When a component uses a custom Hook, it receives the Hook's defined state and behavior, allowing developers to write more modular and maintainable code. Developers can create abstractions that can be easily used and reused across multiple components by creating custom Hooks. Custom Hooks are an effective way to create reusable logic in React while also improving the overall structure of your code.

The Rules of Hooks in React

The Hooks Rules are a set of guidelines to follow when using React Hooks in function components. The goal of these rules is to ensure that Hooks are used correctly and that the component's behavior is predictable. Hooks, according to the Hooks Rules, can only be called at the top level of a function component or custom Hook. Hooks should not be called inside loops, conditions, or nested functions because this could lead to unexpected behavior. Hooks must be rendered in the same order so that React can keep track of them properly. Custom Hooks must also adhere to the Hooks Rules, which state that they can only be used with other Hooks and cannot have any other side effects. By following the Hooks Rules, developers can make sure that their React components are reliable, predictable, and maintainable. Understanding and adhering to these rules is essential when using React Hooks in order to prevent potential bugs and guarantee that your codebase is properly organized.

Summary

Developers can use state, context, and other React features in functional components without the use of class components thanks to React Hooks, a potent addition to the React framework. The useState() and useEffect() functions, which let developers control state and side effects in functional components, are the two most frequently used Hooks. Use custom hooks to separate reusable logic from components and distribute it among various areas of your application. When using React Hooks, it's crucial to adhere to the Rules of Hooks to make sure your components are correctly structured and behave predictably. Overall, React Hooks make it easier to write reusable and maintainable code and offer a simpler, more flexible way to build React components. Developers can write functional components that are simpler to test, reason about, and refactor by using hooks. React Hooks are a useful tool for creating cutting-edge, scalable web applications and represent an exciting evolution of the React framework.

What Happens When You Don't Provide Keys in ReactJS?

Sanjampreet Singh — Mon, 24 Apr 2023 17:36:17 +0000

You've probably heard about the importance of using keys when rendering a list of components when working with ReactJS. But have you ever thought about what happens if you don't provide keys? Let's go over the consequences of not using keys in ReactJS and how to avoid common pitfalls.

What Are Keys in ReactJS?

To begin, Keys are a special attribute that assists React in determining which items in a list of components have changed, been added, or removed. React uses the key to keep track of each component's identity when rendering a list of components, and if the key is missing, React must search through the entire list to determine which component has changed.

What Happens When You Don't Use Keys?

React will have to rely on other methods to determine which component has changed in the absence of keys. This can lead to performance issues and even unexpected bugs.

Let's look at an example. Suppose we have a list of items that we want to render as a series of components. We can do this using the map function:

function ItemList({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

In this example, we are rendering a list of items as li components. However, we have not provided any keys for these components. Let's see what happens when we add or remove an item:

const items = ['Item 1', 'Item 2', 'Item 3'];

ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

// Add an item
items.push('Item 4');
ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

// Remove an item
items.pop();
ReactDOM.render(<ItemList items={items} />, document.getElementById('root'));

In this example, the ItemList component is rendered with an initial set of items. Then we add and remove items from the list. However, because no keys have been provided, React is forced to re-render the entire list on each change, even if only one item has been added or removed. It can lead to a poor user experience. When rendering a list of items and the wrong item is updated, the user may be confused or frustrated by the unexpected behavior.

To avoid this problem, always provide unique keys for components in dynamic lists. This can be accomplished by using a unique identifier, such as an ID or a timestamp.

How to Avoid Common Pitfalls

To avoid these common pitfalls when rendering lists of components, ensure that each component in the list has a unique key. The key should ideally be a unique identifier for the component, such as a database or API response ID. If you don't have a unique identifier, you can use the array's index as a last resort.

function ItemList(props) {
  return (
    <ul>
      {props.items.map((item, index) => (
        <li key={item.id || index}>{item.text}</li>
      ))}
    </ul>
  );
}

In the above example, we're using the item's id attribute as the key and falling back to the index, if id is not present. This ensures that each item has a unique key and allows React to update the list efficiently when changes occur.

Conclusion

Keys play an important part in rendering component lists in React. You can prevent typical issues like as duplicate keys, excessive re-rendering, and bad user experience by giving a unique key for each component. When rendering a list, always specify a key and utilise a unique identifier whenever possible.

DEV Community: Sanjampreet Singh

Hashing to the Rescue: A React Performance Story

Step-by-Step Guide to Setting Up Push Notifications in Node.js: Backend Configuration

Introduction to Push Notifications

Understanding the Architecture

What is VAPID ?

How Does the HTTP Push Protocol Work ?

Setting Up the Backend

Step - by - Step Guide to Implementing Push Notifications

Step 1: Initialize the Project

Step 2: Set Up Environment Variables

Step 3: Initialize Sequelize

Step 4: Define the Subscription Model

Step 5: Set Up the Service Layer

Step 6: Create API Routes and Controllers

Step 7: Initialize the Server

Summary

Webinar about web development

Component-Driven Development with ReactJS: Leveraging Storybook, Figma, and MUI

The Core of Component-Driven Development

ReactJS: The Base of CDD

Storybook: A Canvas for Components

Figma: The Nexus of Design and Development

MUI: Elevating UI Design with Material Concepts

Integrating Storybook, Figma, and MUI in ReactJS Projects

Summary

Tailwind css + Primitive component libraries: React UI's future?

Current paradigm of UI development in React

How Tailwind CSS can be helpful?

Primitive components — A new and different paradigm in React UI

Conclusion

Simplifying API Calls with URLSearchParams and Fetch

Benefits of using URLSearchParams

How can I optimize my HUGE enterprise application? - React JS

Lazy Loading

Using react.lazy()

Using Suspense

Why should lazy() not be called inside a component?

Benefits of lazy loading

Conclusion

Here's a Code example

Writing Modular code in ReactJS

Divide Your Code into Smaller Components

Use Higher-Order Components

Use React Hooks

Use React Context

Some more methods (not react specific)

Conclusion

Why async callback cannot happen in React useEffect hook?

Understanding the useEffect hook

Why async callbacks cannot be used in useEffect

Conclusion

Are React Hooks simply a replacement for React Lifecycle Methods?

React Lifecycle Methods

React Hooks

How React Hooks Don't Relate to Lifecycle Methods

Conclusion

Unlocking the Secrets of React Hooks

What are React Hooks?

How React Hooks Work Under the Hood

State and Effect Hooks in React

Creating Reusable Logic with Custom Hooks in React

The Rules of Hooks in React

Summary

What Happens When You Don't Provide Keys in ReactJS?

What Are Keys in ReactJS?

What Happens When You Don't Use Keys?

How to Avoid Common Pitfalls

Conclusion

Using `react.lazy()`

Using `Suspense`

Why should `lazy()` not be called inside a component?