DEV Community: sundarbadagala

Image Lazy Loading

sundarbadagala — Thu, 04 Jul 2024 17:55:29 +0000

INTRO 🔊

Hello World! 🌎
From now onwards, I want to start a new series named React optimization. We will discuss different react optimization techniques which help to enhance React Application performance.🚀

Today's topic is IMAGE LAZY LOADING🔥

We all know that assets (images) will take time to load once the application is rendered. Having more assets leads to more time to load the app. It affects the app's performance. To avoid this performance issue we can load images only when it is needed (need to display). Suppose we have one image at the top and another image bottom of the page. Initially, we need to render the image which is present at the top. Later we need to render the bottom image when we reach (scroll) that particular part only. It helps to reduce the app's initial rendering time and consume data when only needed.

ADVANTAGES 🔊

🔴 Faster Initial Load Time: By deferring the loading of images that are not immediately visible, the initial page load time is reduced. This leads to a faster and more responsive user experience.

🟠 Reduced Bandwidth Usage: Only the images that are actually needed are loaded, which reduces the overall bandwidth consumption. This is especially beneficial for users on mobile devices or with limited data plans.

🟡 Smoother Scrolling: Lazy loading images ensures that images load as the user scrolls, preventing janky or laggy scrolling experiences caused by heavy image loads.

🟢 Content Prioritization: Critical content and functionality can be loaded first, improving perceived performance and user engagement.

🔵 Improved Search Engine Ranking: Search engines favor faster-loading websites, which can positively impact your site's search engine rankings.

🟣 Reduced Bounce Rate: Faster loading times can lead to lower bounce rates, as users are more likely to stay on a site that loads quickly.
⚫️ Reduced Server Load: By loading only the necessary images, server load and resource usage are reduced, potentially lowering hosting costs.

⚪️ Large Image Galleries: For applications with extensive image galleries or content-heavy pages, lazy loading helps ensure that performance remains optimal.

🟤 Progressive Enhancement: Users with slower internet connections or less capable devices still receive a functional and responsive experience as images load progressively.

APPROACH 🔊

import React from "react";

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <img src="https://picsum.photos/700" loading='lazy'/>
      <br />
      <img src="https://picsum.photos/800"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/900"  loading='lazy'/>
      <br />
      <img src="https://picsum.photos/1000"  loading='lazy'/>
      <br />
    </div>
  );
}

export default ImageLoading;

If we observe the browser network by scrolling smoothly, we can observe assets calling according to scrolling. But not render all the images at a time.

📌 NOTE: The above method will not work for all browsers. So we need to install an external npm package to achieve this.

Install npm package react-lazy-load-image-component

Now we can implement our image lazy loading by using above package.

import React from "react";
import { LazyLoadImage } from "react-lazy-load-image-component";
import 'react-lazy-load-image-component/src/effects/blur.css';

function ImageLoading() {
  return (
    <div>
      <div style={{ height: "120vh" }}></div>
      <LazyLoadImage src="https://picsum.photos/700" />
      <br />
      <LazyLoadImage src="https://picsum.photos/800" />
      <br />
      <LazyLoadImage src="https://picsum.photos/900" />
      <br />
      <LazyLoadImage src="https://picsum.photos/1000" />
      <br />
    </div>
  );
}

export default ImageLoading;

react-lazy-load-image-component is one of the fine libraries that helps to achieve image lazy loading. This package has some other features but we are not discussing them now. You can check those on the npm site.

📌NOTE: Even though image lazy loading is the best concept to enhance app performance, it has some limitations like better to avoid while implementing carousels and above the fold. It affects the user experience.

CONCLUSION 🔊

I hope you guys like this concept. We will discuss the next concept in our next post.👍🏻

Peace 🙂

Decorator Function inside Factory Function

sundarbadagala — Thu, 04 Jul 2024 15:24:52 +0000

INTRO 🔔

Recently I had to create a function with multiple methods🤔. So I created a Factory Function😎. If you don't know what a factory function is then don't worry😉, I will tell you in simple words that The function always returns an object called a factory function. For more information visit this 👉🏻 factory factions🔗 👈🏻. Then after I realised that all the methods have the same validation check🔬. So I decided to create a decorator function to check the validation of all the methods😵‍💫. So I started researching different blogs on how to achieve that but I didn't find any perfect solution, Even though I found, those are very complicated to understand and don't have an organised code format😒.

Today we will discuss how to implement the decorator function inside the factory function.📝

FACTORY FUNCTION 🔔

As mentioned earlier, a factory function is simply a function that returns an object without using the keyword new so the end result of the function is the return of an object. 🚀

👉🏻 ADVANTAGES

📌 First, it's a simple it's just a function it's there's no setup there's no fuss it's just a function and it's really easy to read
📌 No duplicate code and our logic is isolated in one place
📌 Have data privacy

👉🏻 EXAMPLE

//-----------------FACTORY FUNCTION----------------------
const factoryFn = (...args) => {
  const sum = () => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = () => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max=()=>{
    return Math.max(...args)
  }
  return {
    sum,
    multiple,
    max
  };
};

const fn1 = factoryFn(1, 2, 3, 4);
console.log(fn1.sum());
console.log(fn1.multiple());
console.log(fn1.max());

//-------------------FACTORY FUNCTION WITH IIFE-----------------
const factoryFn = (() => {
  const sum = (...args) => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = (...args) => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max = (...args) => {
    return Math.max(...args);
  };
  return {
    sum,
    multiple,
    max,
  };
})();

console.log(factoryFn.sum(1, 2, 3, 4));
console.log(factoryFn.multiple(1, 2, 3, 4));
console.log(factoryFn.max(1, 2, 3, 4));

DECORATOR FUNCTION 🔔

A decorator function💥 is simply a function💥 that receives another function💥 as a parameter and then returns a new function💥 with extended behaviour. So you can pass a function💥 into a decorator function💥 and you'll get a new function💥 back that does more than the function💥 you passed in.

We already created one post for the 👉🏻decorator function👈🏻. Please visit that post for more information. 👍🏻

DECORATOR WITH FACTORY FUNCTION 🔔🔔🔔

After a long discussion, finally, we came to the main topic 😛.

Here the code to implement decorator function inside the factory function 👇🏻👇🏻👇🏻

const factoryFn = (() => {
  const sum = (args) => {
    return args.reduce((curr, acc) => curr + acc, 0);
  };
  const multiple = (args) => {
    return args.reduce((curr, acc) => curr * acc, 1);
  };
  const max = (args) => {
    return Math.max(...args);
  };
  const decorator = (callback) => {
    return (args) => {
      const isValidate = args.some((item) => Number.isInteger(item));
      if (!isValidate) {
        throw new TypeError("arguments cannot be non-integer");
      }
      return callback(args);
    };
  };
  const passingFn = (fn, params) => {
    const newFn = decorator(fn);
    return newFn(params);
  };
  return {
    sum(...params) {
      return passingFn(sum, params);
    },
    multiple(...params) {
      return passingFn(multiple, params);
    },
    max(...params) {
      return passingFn(max, params);
    },
  };
})();

console.log(factoryFn.sum(1, 2, 3, 4));
console.log(factoryFn.multiple(1, 2, 3, 4));
console.log(factoryFn.max(1, 2, 3, 4));

📌Created one method named passingFn to avoid code duplication. That function helps to declare a new function by decorating existed function and returns that declared a function with enhanced feature (nothing but validation check)
📌decorator method, we already discussed that. That returns the function that we passed as a callback with a validation check.
📌The remaining methods are already existing ones

CONCLUSION 🔔

I hope you guys understand how to implement decorator function inside the factory function.

We will meet in next with another concept

Peace 🙂

React Custom Hooks (useEventListener)

sundarbadagala — Wed, 01 May 2024 05:36:23 +0000

INTRO 🔔

Hello World! 👋
Now we are discussing another beautiful hook, that is useEventListener🔥.

USAGE 🔔

Sometimes we need to use Event Listeners🚀 (JavaScript Event Listeners) in React Apps💻. Every time while use event listeners we need to call them and remove them after the call. React custom hook concept will help us to make these listeners readable and efficient😎.

CODE 🔔

import { useEffect } from "react";

export const useEventListener = (callback, event, element = "window") => {
  useEffect(() => {
    if (element === "window" && typeof window !== undefined) {
      window.addEventListener(event, callback);
    } else {
      const tagEl = document.getElementById(element);
      tagEl.addEventListener(event, callback);
    }
    return () => window.removeEventListener(event, callback);
  }, []);
};

USE CASE 🔔

WITHOUT HOOK 🔇

import React, { useEffect } from "react";

function Index() {
  const callback = (type) => {
    console.log(type);
  };
  useEffect(() => {
    const contEl = document.getElementById("container");
    contEl.addEventListener("mouseover", () => callback("over"));
    contEl.addEventListener("mouseout", () => callback("out"));

    return () => {
      contEl.removeEventListener("mouseover", callback);
      contEl.removeEventListener("mouseout", callback);
    };
  }, []);
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "100px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

WITH HOOK 🔊

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  const callback = (type) => {
    console.log(type);
  };
  useEventListener(() => callback("over"), "mouseover", "container");
  useEventListener(() => callback("out"), "mouseout", "container");
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "100px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

SOME OTHER EXAMPLES

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  useEventListener(() => {
    console.log("scrolling...");
  }, "scroll");
  return (
    <div>
      <div
        id="container"
        style={{ width: "100px", height: "1000px", background: "red" }}
      >
        Hello World
      </div>
    </div>
  );
}

export default Index;

import React from "react";
import { useEventListener } from "./hook";

function Index() {
  useEventListener(() => {
      console.log("clicked...");
    },
    "click", "btn");
  return (
    <div>
      <button id="btn">click here</button>
    </div>
  );
}

export default Index;

CONCLUSION 🔔

This is a very helpful hook to call event listeners in React Apps.
I hope this hook is very helpful. We will discuss another new hook in our next post.

Peace 🙂

React Custom Hooks (useRefs)

sundarbadagala — Wed, 01 May 2024 03:33:28 +0000

INTRO 🔔
Hello World! 👋
Today we are discussing another custom hook🪝 is useRefs🔥. It is an extension of useRef💥. Now we will see the code and how to use it.

USAGE 🔔

As a React developer🧑🏻‍💻 , we all know what useRef💥 hook is. useRef💥 helps to access the DOM elements. One useRef💥 will help to access one element but sometimes we need to access more than one element 🤔. That time we need to create multiple uesRef💥 hooks. To avoid this problem we are creating a useRefs🔥 custom hook.

Note📌 :- As discussed earlier hook useLocal🚀. This is not a hook, it is the helper. But for our convenience, we are calling it a hook🪝.

CODE 🔔

export const useRefs = () => {
  const refs = [];
  return [refs, (el) => el && refs.push(el)];
};

USE CASE 🔔

TRADITIONAL MULTIPLE useRef HOOKS 🕯️

import React, { useEffect, useRef } from "react";

function App() {
  const headerRef = useRef(null);
  const inputRef = useRef(null);
  const btnRef = useRef(null);
  useEffect(() => {
    console.log("header", headerRef.current.innerText);
    console.log("input", inputRef.current.defaultValue);
    console.log("button", btnRef.current.offsetWidth);
  }, []);
  return (
    <>
    <main>
        <div id="header" ref={headerRef}>Header</div>
        <input type="text" defaultValue={'hello world'} ref={inputRef}/>
        <button id="click" ref={btnRef}>Click Here</button>
    </main>
    </>
  );
}

export default App;

USING useRefs HOOK 💡

import React, { useEffect } from "react";
import { useRefs } from "./useRefs";

function App() {
  const [refs, handleRef] = useRefs();
  useEffect(() => {
    console.log("header", refs[0].innerText);
    console.log("input", refs[1].defaultValue);
    console.log("button", refs[2].offsetWidth);
  }, []);
  return (
    <>
      <main>
        <div id="header" ref={handleRef}>Header</div>
        <input type="text" defaultValue={"hello world"} ref={handleRef} />
        <button id="click" ref={handleRef}>Click Here</button>
      </main>
    </>
  );
}

export default App;

It also gives the same output as using multiple useRef hooks.

Please practice in your Code Editor, you will get full clarity on this hook.

CONCLUSION 🔔

I hope this hook is helpful. We will meet with another hook in another post.

Peace 🙂

React Custom Hooks (useLocal)

sundarbadagala — Tue, 30 Apr 2024 17:52:43 +0000

INTRO 🔔

Hello World! 👋
Today we are discussing another custom hook named useLocal🔥.

Note📌 : Technically this one can't be considered as a hook 🙃 because as per the custom hook definition If we create one function using react hooks then it is called a Custom Hook 🙂. But in this code, we are not using any react hooks 😕. So we can't call it a custom hook 😟 but for our convenience, we are now considering it as a custom hook 😉.

USAGE 🔔

If you are a Frontend Developer🧑🏻‍💻, you must know the Local Storage📦 & Session Storage📦. These are browser properties that help to store and access the data in sessions.

Every time using local storage for getting data as localStorage.getItem('item') and for setting data as localStorage.setItem('item', data) is very lengthy and it is not readable. To overcome this problem, we created one helper(custom hook) called useLocal (particularly for localStorage)

CODE 🔔

export const useLocal = (itemName) => {
  const setLocal = (data) => {
    localStorage.setItem(itemName, JSON.stringify(data));
  };
  const getLocal = () => {
    return JSON.parse(localStorage.getItem(itemName));
  };
  const removeLocal = () => {
    localStorage.removeItem(itemName);
  };

  return [setLocal, getLocal, removeLocal];
}

USE CASE 🔔

import React, { useEffect } from "react";
import { useLocal } from "./useLocal";

function Index() {
  const [setLocal, geLocal, removeLocal] = useLocal("app_token");

  useEffect(() => {

    setLocal("k8axga83alf991z90a9a0aaf1");

    return () => removeLocal();
  }, []);

  const handleGet = () => {
    const token = geLocal();
    console.log(token);
  };

  return (
    <div>
      <button onClick={handleGet}>Get Token</button>
    </div>
  );
}

export default Index;

CONCLUSION 🔔

By using the same method we can create a custom hook for Session Storage also.

I hope this post gives you some information. We will meet in next post with another new custom hook.

Peace 🙂

React Custom Hooks (useCounter)

sundarbadagala — Tue, 30 Apr 2024 17:08:22 +0000

INTRO 🔔

Hello World! 👋
Today we are discussing another custom hook 🪝 named useCounter🔥. In this post, we will discuss useCounter🔥 hook code and use case.

USAGE 🔔

Sometimes in Frontend development, we need to use count down or counter or time. That counter may have some restrictions like no need to update on refreshing the page i.e. If the counter starts with 30 and decreases one by one with one one-second interval, It should not start from 30 again after refreshing the page. 👉🏻Session Storage👈🏻 is a beautiful property in a browser that will help us to overcome this problem. Let's look deep into the code 🚀.

CODE 🔔

import { useEffect, useState } from 'react';

export const useCounter = (inititalCounter = 30, sessionName = 'count_timer') => {
  const [counter, setCounter] = useState('');
  useEffect(() => {
    const value = sessionStorage.getItem(sessionName);
    if (value) {
      setCounter(value);
    } else {
      sessionStorage.setItem(sessionName, inititalCounter);
      setCounter(inititalCounter)
    }
  }, []);
  useEffect(() => {
    const interval = setInterval(() => {
      setCounter(prev => prev - 1);
    }, 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  useEffect(() => {
    return () => {
      if (counter < 1) {
        sessionStorage.setItem(sessionName, inititalCounter);
      } else {
        sessionStorage.setItem(sessionName, counter - 1);
      }
    };
  }, [counter]);
  const handleReset = () => {
    setCounter(inititalCounter + 1);
  };
  return [counter > inititalCounter ? inititalCounter : counter, handleReset];
};

USE CASE

import React from "react";
import { useCounter } from "./useCounter";

function App() {
  const [counter, handleReset] = useCounter(30);
  return (
    <div>
      {counter}
      <button onClick={handleReset}>reset</button>
    </div>
  );
}

export default App;

CONCLUSION 🔔

I hope this post is helpful 😊 and helps to use a counter in frontend development 🧑🏻‍💻. We will meet with another hook in the next post.

Peace 🙂

React Custom Hooks (useFluidFont)

sundarbadagala — Tue, 30 Apr 2024 16:40:15 +0000

INTRO 🔔

Hello World! 👋
Today we are discussing another custom hook🪝 named useFluidFont🔥. In this post, we will discuss this hook usage, code and use case.

USAGE 🔔

As a front-end developer 😎, I know responsive designs are crucial in web development. Changing font size based on screen size is the main important thing in responsive design. Usually, we use media queries in CSS 🎨 to achieve this. However, it leads to lengthy code and multiple media queries for different screen sizes 🙁. But, by using the useFluidFont🔥 custom hook, we can achieve the same output with efficient code practice 😊.

WITH MEDIA QUERIES 🔕

.container {
    font-size: 24px;
}

@media screen and (max-width:1280px) {
    .container {
        font-size: 22px;
    }
}

@media screen and (max-width:1140px) {
    .container {
        font-size: 20px;
    }
}

@media screen and (max-width:980px) {
    .container {
        font-size: 18px;
    }
}

@media screen and (max-width:720px) {
    .container {
        font-size: 16px;
    }
}

WITH CUSTOM HOOK 🔔

📌 NOTE: before creating this hook, we need to create another hook named useWinowResize🚀. It is already created on our custom hook series. Please check 👉🏻 useWindowResize

import { useCallback } from "react";
import { useWindowResize } from "./useWindowResize";

export const useFluidFont = () => {
  const { width } = useWindowSize();
  const getFont = useCallback(
    (minFont, minWidth, maxFont, maxWidth) => {
      if (width <= minWidth) {
        return minFont;
      } else if (width >= maxWidth) {
        return maxFont;
      } else {
        return `calc(${minFont}px + (${maxFont} - ${minFont}) * ((100vw - ${minWidth}px) / (${maxWidth} - ${minWidth})))`;
      }
    },
    [width]
  );
  return getFont;
};

USE CASE 🔔

import React from "react";
import "./styles.css";
import { useFluidFont } from "./useFluidFont";

function App() {
  const font = useFluidFont();
  return (
    <div>
      <div className="container">HELLO WORLD</div>
      <div style={{ fontSize: font(16, 720, 24, 1280) }}>HELLO WORLD</div>
    </div>
  );
}

export default App;

CONCLUSION 🔔

By using the above hook, we can change the font size of application responsively without using multiple CSS media queries.

I hope you people like the useFluidFont hook. We will meet with another hook in another post.

Peace 🙂

sort() vs toSorted()

sundarbadagala — Thu, 30 Nov 2023 09:38:37 +0000

DEFINITION 🔊

sort() 🔔
The sort() method of Array instances sorts the elements of an array in place and returns the reference to the same array,

toSorted() 🔔
The toSorted() method of Array instances is the copying version of the sort() method. It returns a new array with the elements.

📌 sort() method will mutate the original array but toSorted() method won't affect original, It returns as new array

EXAMPLE 🔊

sort()

const arr1 = [4,1,7,2,9]
const arr2 = arr1.sort()

console.log(arr2)   //[ 1, 2, 4, 7, 9 ]
console.log(arr1)    //[ 1, 2, 4, 7, 9 ]

toSorted()

const arr1 = [4,1,7,2,9]
const arr2 = arr1.toSorted()

console.log(arr2)   //[ 1, 2, 4, 7, 9 ]
console.log(arr1)    //[ 4, 1, 7, 2, 9 ]

📌 toSorted() method currently works in node.js version >19 and Chrome and Edge (from version 110), Safari (from version 16), Firefox (from version 115). It's not supported in older versions.

Sort without mutating the original array and without using toSorted() method

const arr1 = [4,1,7,2,9]
const arr2 = [...arr].sort()

console.log(arr2)   //[ 1, 2, 4, 7, 9 ]
console.log(arr1)    //[ 4, 1, 7, 2, 9 ]

JavaScript Memoization

sundarbadagala — Thu, 23 Nov 2023 16:56:43 +0000

INTRO 🔊

Memoization is a technique 🏆 used in computer programming to optimize 🚀 the performance of applications. It involves storing 💿 the results of expensive function calls and returning the cached result when the same inputs occur again. This can reduce 📉 the number of function calls and improve the overall efficiency of the program. 🎉

Sometimes we need to call the same logic again and again with different parameters. What if that logic is very expensive? To avoid it javascript has one beautiful concept which is known as Memoization 🔥. Memoization is the concept which memorises the previous result and it will return whenever we call it with the same parameters without having any operation 😎.

DEFINITION 🔊

Memoization is a technique for speeding up applications by caching the results of expensive function calls and returning them when the same inputs are used again. 🚀

USE CASE 🔊

As earlier said, Sometimes we need to do the same operation with the same inputs again and again. If that operation is expensive, every time it will take more time to run that operation. Memoization will help us overcome this problem

EXAMPLE 🔊

WITHOUT MEMOIZATION 🔕

const squareFn = (n)=>{
    let count =0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(30000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

console.time()
console.log(squareFn(40000))
console.timeEnd()

By observing the above code we can understand that initially, we called squareFn function with parameter 30000. It is a very expensive operation so it will take more time to return the value. If you call the same squareFn function with the same parameter 30000, then also it will take same time (The time it will take to return the value previously) to return the value 😞. So here memoization helps us to remember that value and returns without any operation whenever we call that function with the same parameter 😉.

WITH MEMOIZATION 🔔

const squareFn=(n)=>{
    let count=0
    for(let i=1; i<=n; i++){
        for(let j=1; j<=n; j++){
            count++
        }
    }
    return count
}

const memoizationFn=(callback)=>{
    const memoizedObj={}
    return (n)=>{
        if(!memoizedObj[n]){
            memoizedObj[n] = callback(n)
        }
        return memoizedObj[n]
    }
}

const square = memoizationFn(squareFn)


console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(30000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

console.time()
console.log(square(40000))
console.timeEnd()

If you call the square function the first time with parameter 30000 it will take more time to return the value. But when it's second calling with the same parameter 30000 it will return the memoized from object memoizedObj without doing any operation.

CONCLUSION 🔊

Memoization is a beautiful concept which helps increase the performance of applications. If your application has these types of properties (i.e. need to call a function with the same parameters multiple times) memoization helps you very much.

Peace 😊

JavaScript Chaining

sundarbadagala — Thu, 23 Nov 2023 13:38:43 +0000

INTRO 🔊

Chaining is the concept one function returns a current(this) object and another function will use values in that current(this) object. It's the same as PIPELINE explained in my previous post. But the difference is in chaining we have pre-defined methods not like a pipeline. Javascript chaining is a very familiar concept. If you know array methods then you automatically know javascript chaining.

DEFINITION 🔊

Method Chaining is a programming strategy that simplifies and embellishes your code. It is a mechanism for calling a method on another method of the same object.

USAGE 🔊

For example, if we want to use one method/function modified value in another method/function every time we have to call that method/function and have to pass the returned value from the previous function to the next method/function. It leads to more code, lacks the best practice and affects the performance.

EXAMPLE 🔊

For example let's take four functions named add, subtract, divide, multiple. We have to use the value returned from the function add into subtract, later we have to use the returned value from subtract into divide, and in that same way, we have to use the returned value from divide into multiple and finally should be return the value.

WITHOUT CHAIN 🔕

const add=(i,num )=>{
   return i + num //16
}

const subtract=(i, num)=>{
   return i - num //12
}

const divide=(i, num)=>{
   return i / num //4
}

const multiple=(i, num)=>{
   return i * num //8
}

let x = 10
const a = add(x, 6)
const b = subtract(a, 4)
const c = divide(b, 3)
const res = multiple(c, 2)

console.log(res)

If you observe the above code we wrote all 4 methods individually and defined them one by one. It takes up more space and code is also not much readable.

const add=(num, a)=> {
   return num + a
}
const subtract=(num, a)=>{
   return num - a
}
const divide=(num, a)=>{
    return num / a
}
const multiple=(num, a)=>{
   return num * a
}

const res = multiple(divide(subtract(add(10, 6), 4), 3), 2)

console.log(res)  //8

By using the Higher Order Function method, the code is not readable and it's taking right to left format (usually the code should be in left to right format) which is a little bit confusing.

const add=(callback, num)=> {
    return callback(num + 6)
}
const subtract=(callback, a)=>{
    return callback(a - 4)
}
const divide=(callback, a)=>{
    return callback(a / 3)
}
const multiple=(callback, a)=>{
    return callback(a * 2)
}

const res = add((a)=>{
    return subtract((b)=>{
      return multiple((c)=>{
          return divide((d)=>{
             return d
          }, c)
      }, b)
    }, a)
}, 10)

console.log(res)

With the callback method, It creates callback hell, not readable and not very efficient.

WITH CHAIN 🔔

function main(num) {
  let i = num;
  return {
    add: function (num) {
      i += num;
      return this;
    },
    subtract: function (num) {
      i -= num;
      return this;
    },
    divide: function (num) {
      i /= num;
      return this;
    },
    multiple: function (num) {
      i *= num;
      return this;
    },
    print() {
      return i;
    },
  };
}

const x = main(10)
const res = x.add(6).subtract(4).divide(3).multiple(2).print();

cosole.log(res)

The above code is very readable and we can consider it as the best practice method compared to the previous one.

DIFFERENT WAYS TO ACHIEVE CHAINING IN JAVASCRIPT 🔊

FACTORY FUNCTIONS 📕

function main(num) {
  let i = num;
  return {
    add: function (num) {
      i += num;
      return this;
    },
    subtract: function (num) {
      i -= num;
      return this;
    },
    divide: function (num) {
      i /= num;
      return this;
    },
    multiple: function (num) {
      i *= num;
      return this;
    },
    print() {
      return i;
    },
  };
}

const x1 = main(10);
const x2 = main(10);

const value = x1.add(6).subtract(4).multiple(3).divide(2).print();
const value2 = x2.multiple(3).add(6).subtract(4).divide(2).print();
const value3 = x2.multiple(5).divide(4).print()

console.log(value);     //18
console.log(value2);    //16
console.log(value3)     //20

CONSTRUCTOR FUNCTIONS 📗

const main = function (init = 0) {
  this.i = init;
  this.add = function (i) {
    this.i += i;
    return this;
  };
 this.subtract = function (i) {
    this.i -= i;
    return this;
  };
  this.multiple = function (i) {
    this.i *= i;
    return this;
  };
 this.divide = function (i) {
    this.i /= i;
    return this;
  };
  this.print = function () {
    return this.i;
  };
};

const x1 = new main(10);
const x2 = new main(10);

const value = x1.add(6).subtract(4).multiple(3).divide(2).print();
const value2 = x2.multiple(3).add(6).subtract(4).divide(2).print();
const value3 = x2.multiple(5).divide(4).print()

console.log(value);     //18
console.log(value2);    //16
console.log(value3)     //20

CLASS METHODS 📘

class Main {
  constructor(data) {
    this.data = data;
  }
  add(num) {
    this.data += num;
    return this;
  }
  subtract(num) {
    this.data -= num;
    return this;
  }
  divide(num){
      this.data /= num;
      return this;
  }
  multiple(num) {
    this.data *= num;
    return this;
  }
  print() {
    return this.data;
  }
}

const x1 = new Main(10);
const x2 = new Main(10)

const value = x1.add(6).subtract(4).multiple(3).divide(2).print();
const value2 = x2.multiple(3).add(6).subtract(4).divide(2).print();
const value3 = x2.multiple(5).divide(4).print()

console.log(value);     //18
console.log(value2);    //16
console.log(value3)     //20

OBJECT METHODS 📙

const main = {
  data: {
    i: 0,
  },
  initiate: function (num = 0) {
    this.data.i = num;
    return this;
  },
  add: function (num) {
    this.data.i += num;
    return this;
  },
  subtract: function (num) {
    this.data.i -= num;
    return this;
  },
  multiple: function (num) {
    this.data.i *= num;
    return this;
  },
  divide: function (num) {
    this.data.i /= num;
    return this;
  },
  print: function () {
    return this.data.i;
  },
};

const value = main.initiate(10).add(6).subtract(4).divide(3).multiple(2).print();
const value2 = main.initiate(10).multiple(3).add(6).subtract(4).divide(2).print();

console.log(value);     //8
console.log(value2)     //16

SIMILAR TO ARRAY METHODS 🔊

If you observe array methods like map, filter, reduce etc... they are also follows the same code practice

For Example :-

Array.map().filter().reducer()

CONCLUSION 🔊

Chaining is the one of the best practice method for create multiple methods depends on one on another. same like array methods. It looks clean and readable. So from now onwards if we want to write multiple dependent methods, follow the chaining method 😎

Peace 😊

React Custom Hooks (useNetworkStatus)

sundarbadagala — Thu, 19 Oct 2023 11:54:24 +0000

INTRO 🔊

Hello World! 👋
Today we are discussing another custom hook named useNetworkStatus🔥. In this post, we will discuss this hook's usage, code and use case.

USAGE 🔊

Sometimes developers want to know whether the user is offline or online. By using JavaSCript we can find the user status (offline/online). But creating a custom hook and using it whenever we want is better than using JavaScript code every time right? For that purpose, we are creating one custom today.

CODE 🔊

import {useState,useEffect} from 'react'

 const useNetworkStatus=()=> {

    const [isOnline, setIsOnline] = useState(navigator.onLine);

    useEffect(() => {
      window.addEventListener('online', () => {
        setIsOnline(navigator.onLine);
      });
      window.addEventListener('offline', () => {
        setIsOnline(navigator.onLine);
      });

      return ()=>{
        window.removeEventListener("online", setIsOnline);
        window.removeEventListener("offline", setIsOnline);
      }
    });

    return isOnline;
  }

  export default useNetworkStatus

USE CASE 🔊

import React from 'react';
import { useNetworkStatus } from 'share/hooks';

function Index() {
  const isOnlie = useNetworkStatus();
  return <div>Index</div>;
}

export default Index;

CONCLUSION 🔊

By using the above hook, we can find whether is online or not.

I hope you people like the useNetworkStatus hook. We will meet with another hook in another post.

Peace 🙂

React Custom Hooks (useMediaPermission)

sundarbadagala — Wed, 18 Oct 2023 09:05:29 +0000

INTRO 🔊

Hello World! 👋
Today's custom hook is useMediaPermission🔥. This post will discuss how to detect media permissions like the camera and microphone of any application.

USAGE 🔊

While handling media applications like chat and live stream. We have to be aware of whether the user is given camera and microphone permissions or not and have to track whether the user denied or rejected the permissions while using the application. For that purpose, we are creating one custom hook.

📌Note: This hook is mainly focussing on camera and microphone permissions only, not other permissions like geolocation, notification, accelerometer etc...

HOOK 1

import { useEffect } from "react";

export const useMediaPermission = (callback, constraints) => {
  const getPermission = (type) => {
    try {
      navigator.permissions
        .query({ name: type })
        .then((res) => {
          callback({
            name: res.name,
            state: res.state,
          });
          res.onchange = () => {
            callback({
              name: res.name,
              state: res.state,
            });
          };
        })
        .catch((error) => {
          console.log(error.message);
        });
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    if (constraints.length) {
      constraints.map((item) => getPermission(item));
    }
  }, [navigator.permissions]);
};

USE CASE

import React from "react";
import { useMediaPermission } from "./useMediaPermission";

function Inex() {
  const callback = (data) => {
    console.log(data);
  };
  useMediaPermission(callback, ["camera","microphone"]);
  return <div>Inex</div>;
}

export default Inex;

📌Note: navigator.permissions.query can't detect camera and microphone permissions in Firefox and Safari. It only supports the browsers Chrome and Edge.
For more information visit this link
For that purpose we have created another hook

HOOK 2

import { useEffect } from "react";

export const useUserMediaPermission = (callback, constraints) => {
  const getPermission = (item) => {
    try {
      navigator.mediaDevices
        .getUserMedia({ [item]: true })
        .then((res) =>
          callback({
            name: item,
            state: res.active,
          })
        )
        .catch((error) =>
          callback({
            name: item,
            state: error.message,
          })
        );
    } catch (error) {
      callback({
        name: item,
        state: error.message,
      });
    }
  };
  useEffect(() => {
    if (constraints.length) {
      constraints.map((item) => getPermission(item));
    }
  }, []);
};

USE CASE

import React from "react";
import { useUserMediaPermission } from "./useUserMediaPermissoin";

function Inex() {
  const callback = (data) => {
    console.log(data);
  };
  useUserMediaPermissio(callback, ["audio", "video"]);
  return <div>Inex</div>;
}

export default Inex;

DIFFERENCE BETWEEN HOOK 1 & 2 (LIMITATIONS)

hook 2 will support all browsers but hook 1 will support only Chrome and Edge.
If we change the permissions while using the application, hook 1 returns a callback with the latest permission status (whether it accepts or denied/prompted) but this feature won't work in hook 2.
If we want to know only the initial status of media permissions, it's better to use hook 2.
If we want to know the status of media permissions every time they change while using the application, it's better to user hook 1 (but this works only in Chrome and Edge)
Recently I found one NPM package named mic-check. This one is also very helpful to detect the media permissions but unfortunately, this package also detects the permissions only on page load, not every time changes the permissions while using the app.

I hope you people understand the useMediaPermission hook. We will meet with another hook in another post.

Peace 🙂