DEV Community: Narenthera Prasanth M

Unleashing the Power of React Context: Simplifying State Sharing

Narenthera Prasanth M — Sun, 31 Mar 2024 15:01:14 +0000

React Context API is a built-in feature in React that allows for easier management of state and props across different components without the need for prop drilling. It creates a global scope for data, making it accessible to any component that needs it, regardless of its position in the component tree.

Here's an example of how you can use the React Context API:

Let's say we have a simple e-commerce website where users can add items to their cart and view the total cost of those items. Without using the Context API, we would have to pass down the cart object through multiple levels of child components as props until it reaches the component that displays the total cost. This process is known as "prop drilling" and can become cumbersome and difficult to manage as the application grows.

To solve this problem, we can create a new context using the createContext() method provided by React:

import React from 'react';

const CartContext = React.createContext();

export default CartContext;

Next, we can define our CartProvider, which will be responsible for managing the state of our cart object:

import React, { useState } from 'react';
import CartContext from './CartContext';

function CartProvider(props) {
  const [cart, setCart] = useState([]);

  function addItemToCart(item) {
    setCart([...cart, item]);
  }

  return (
    <CartContext.Provider value={{ cart, addItemToCart }}>
      {props.children}
    </CartContext.Provider>
  );
}

export default CartProvider;

In this example, we are defining a CartProvider component that uses the useState hook to maintain the state of the cart. We also define a helper function called addItemToCart that adds a new item to the cart array. The value prop passed to the CartContext.Provider contains both the current cart object and the addItemToCart function.

Now, let's see how we can consume this context in another component:

import React, { useContext } from 'react';
import CartContext from './CartContext';

function TotalCost() {
  const { cart } = useContext(CartContext);

  const totalCost = cart.reduce((accumulator, currentValue) => {
    return accumulator + currentValue.price * currentValue.quantity;
  }, 0);

  return <div>{totalCost}</div>;
}

export default TotalCost;

In this example, we are consuming the CartContext using the useContext hook. By doing so, we now have access to the cart object defined in the CartProvider component. We can then calculate the total cost based on the contents of the cart array.

By using the React Context API, we were able to easily share state between two unrelated components without having to pass props down through multiple layers of intermediate components.

Comparing to Redux:

Redux is a popular library used for managing state in large-scale React applications. While similar in some ways to the React Context API, there are some key differences between the two. Here are some points comparing React Context API and Redux:

Scope: React Context has a more limited scope compared to Redux. With React Context, state is only available within the component hierarchy rooted at the provider component. In contrast, Redux provides a single source of truth for state that is globally accessible throughout the entire application.
Immutability: Redux enforces immutable updates to state, while React Context does not. This means that when updating state in Redux, developers must always produce a new copy of the state instead of modifying the existing state directly. In contrast, React Context allows developers to modify state directly if they choose to do so.
Middleware: Redux supports middleware such as redux-thunk or redux-saga for handling side effects like async actions. While there are libraries that provide similar functionality for React Context, these features are not included out of the box.
Performance: Both React Context and Redux use memoization under the hood to optimize performance. However, since Redux maintains a single source of truth for state, it can perform better than React Context in certain situations where many components depend on the same piece of state.

Overall, whether to use React Context or Redux depends on the specific requirements of your project. For smaller projects or cases where state sharing is required only within a small part of the component hierarchy, React Context may be sufficient. However, for larger projects with complex state management needs, Redux may be a better fit.

Transforming Digital Experiences: An Introduction to Progressive Web Applications (PWAs)

Narenthera Prasanth M — Sat, 30 Mar 2024 07:00:09 +0000

Progressive Web Applications(PWAs) are web applications that combine the best features of both websites and native mobile applications. They are designed to offer fast, reliable, and engaging experiences even on unreliable network connections.

Advantages of PWAs:

Fast Load Times: PWAs can load quickly, even on slow networks, thanks to optimizations like caching and preloading.
Offline Mode: PWAs can cache resources locally, enabling offline mode and faster load times.
Engaging UX: PWAs can provide immersive full-screen experiences, complete with animations and interactions similar to native mobile apps.
Easy Installation: Users can easily install PWAs on their home screen, without needing to go through the app store.
Cross-platform compatibility: PWAs can run on any platform that supports modern web technologies, including desktop browsers, Android, iOS, and Chrome OS.

Purpose of PWAs:

The primary goal of PWAs is to provide a seamless and engaging user experience that combines the benefits of web and native mobile applications. By offering fast load times, offline mode, and full-screen experiences, PWAs aim to bridge the gap between traditional web pages and native mobile apps.

Features of PWAs:

Responsive Design: PWAs are responsive and adapt to various screen sizes and orientations.
Service Workers: PWAs use service workers to enable background sync, push notifications, and offline capabilities.
HTTPS Requirement: PWAs require secure communication over HTTPS protocol to protect user data.
Manifest File: PWAs use manifest files to declare metadata about the app, such as iconography, colors, and splash screens.
Linkability: PWAs can be shared via URLs, unlike native mobile apps that require download and installation.

Usage of PWAs:

PWAs can be used in a variety of scenarios, including e-commerce, news sites, social media platforms, productivity tools, and gaming. They are particularly well suited for businesses looking to engage customers on mobile devices, without requiring them to download and install a native app.

Some examples of successful PWA implementations include Twitter Lite, Starbucks, Flipkart, Alibaba, and Trivago. These companies have reported significant improvements in engagement metrics, conversion rates, and overall customer satisfaction after implementing PWAs.

Overall, PWAs represent a powerful tool for businesses looking to deliver high-quality, performant, and engaging web experiences. By combining the strengths of web and native mobile applications, PWAs offer a promising path forward for the future of digital experiences.

From 'I Will' to 'I Do': Applying Agile Principles with a realtime example

Narenthera Prasanth M — Fri, 29 Mar 2024 18:40:25 +0000

Agile is an iterative and incremental approach to project management and product development that emphasizes flexibility, collaboration, and continuous improvement. It is a mindset and set of principles that guide teams in delivering value to customers or stakeholders in a more responsive and adaptive manner.

Here are the key aspects of the agile approach:

Consider the example of planning a wedding using an agile approach.

Iterative and Incremental Delivery: Instead of trying to plan the entire wedding upfront, agile teams work in short iterations or sprints, delivering small increments of value. For the wedding, the first iteration could be creating a rough guest list and securing the venue and date. Subsequent iterations could focus on specific tasks like finalizing the menu, booking vendors, or selecting decorations.

Adaptive Planning: Agile teams recognize that requirements can change, and they embrace this change by regularly re-evaluating and adjusting their plans and priorities based on feedback and changing needs. In the wedding example, you might discover that the initial guest list is too large for the chosen venue, or that the date conflicts with another important event for some guests. With the agile approach, you can adapt your plans accordingly in the next iteration.

Cross-Functional Collaboration: Agile teams are cross-functional, with members from different disciplines working together throughout the project lifecycle. For a wedding, this could involve collaboration between the couple, their families, wedding planners, caterers, florists, and other vendors, ensuring everyone is aligned and contributing their expertise.

Customer Collaboration: Agile emphasizes close collaboration with customers or end-users, seeking their feedback and involving them in the development process to ensure that the product or solution meets their needs. In the case of a wedding, the "customers" are the couple getting married, and their input and feedback should be regularly sought and incorporated into the planning process.

Continuous Improvement: Agile teams reflect on their processes and practices at the end of each iteration, identifying areas for improvement and adjusting their approach accordingly. For the wedding planning, this could involve reviewing the progress after each iteration, gathering feedback from the couple and other stakeholders, and making necessary adjustments for the next iteration.

Empowered and Self-Organizing Teams: Agile teams are typically self-organizing and empowered to make decisions, manage their own workload, and take ownership of their work. In the wedding context, the wedding planning team (whether it's the couple themselves or hired professionals) should be empowered to make decisions and manage the planning process effectively.

Focus on Working Solutions: Agile prioritizes the delivery of working software or solutions over comprehensive documentation, recognizing that delivering value early and often is more important than following a rigid plan. For the wedding, this could mean prioritizing the actual execution of tasks (e.g., booking vendors, selecting decor) over extensive documentation or planning, while still maintaining a general framework.

Agile methodologies, such as Scrum, Kanban, and Lean, provide frameworks and practices for implementing these principles in various domains, including software development, product management, project management, and even non-technical areas like event planning or marketing campaigns.

The key idea behind agile is to embrace change, foster collaboration, and deliver value incrementally while continuously adapting and improving based on feedback and changing circumstances. By applying these principles to wedding planning, couples can ensure a more flexible, collaborative, and adaptive process, resulting in a successful and memorable celebration tailored to their evolving needs and preferences.

JavaScript Promises

Narenthera Prasanth M — Mon, 12 Feb 2024 03:37:24 +0000

A JavaScript Promise is an object representing the eventual completion or failure of an asynchronous operation. It allows you to handle asynchronous operations more elegantly and provides a way to perform tasks asynchronously and handle their results later.

Here's a real-life example story to illustrate JavaScript Promise:

Imagine you're a student waiting for your exam results. You have no control over when the results will be available, but you want to be prepared to celebrate or console yourself based on the outcome. So, you decide to use a Promise to represent this situation.

In this example, waitForExamResults is a Promise representing the process of waiting for exam results. Inside the Promise constructor function, there's a simulation of obtaining the exam score asynchronously after a delay of 3 seconds.
If the exam score is 60 or higher, the Promise resolves with a success message indicating the passing score. Otherwise, it rejects with an error message indicating failure.
The then() method is used to handle the fulfillment of the Promise (passing scenario), and the catch() method is used to handle the rejection of the Promise (failing scenario).
When you run this code, it first logs "Waiting for exam results...". After 3 seconds, it logs either "Success: Congratulations! You passed the exam with a score of X." or "Error: Sorry, you failed the exam with a score of X.", depending on the randomly generated exam score.

Create custom alias for 127.0.0.1 in Ubuntu

Narenthera Prasanth M — Tue, 21 Sep 2021 11:23:55 +0000

In some cases developers need some alternates for localhost to access the IP 127.0.0.1 in our system.

Here we are going to see how to setup alias for IP 127.0.0.1 in Ubuntu.

Step 1 :

We need to edit /etc/hosts file to add new aliases

In hosts file, you can see the localhost configured as alias for 127.0.0.1

Step 2 :

Add your alias like below and save it.

Now localhost, abc.fake.com and xyz.test.com are aliases for IP 127.0.0.1

Note : Browser always search in your local domain registry before reached to DNS server.