satyam4p

import { useState } from "react";
import "./styles.css";

const data = [
  {
    id: 1,
    name: "README.md",
  },
  {
    id: 2,

satyam4p

class AsyncTaskQueue {
  constructor(concurrency) {
    this.concurrency = concurrency;
    this.running = 0;
    this.queue = [];
  }

  pushtask(task) {
    this.queue.push(task);
    process.nextTick(this.next.bind(this));

satyam4p

//We will now look at pattern that will execute set of given tasks in parallel with given concurrency.

function makeSimpleTask(name) {
  return (cb) => {
    console.log("started");
    setTimeout(() => {
      console.log(name, "completed");
      cb();
    }, Math.random() * 2000);
  };

satyam4p

import { useEffect, useState } from "react";
import useDebounceHook from "./useDebounceHook";

const useResponsive = () => {
  const debounce = useDebounceHook(onResizeHandler, 500, false);

  const [state, setState] = useState({
    isMobile: false,
    isTablet: false,
    isDesktop: false,

satyam4p

//Implement a throttler that executes an array of tasks. When the throttler is passed a number, only executes that number of the tasks and passes the other tasks into a queue.

//Throttling is a way/technique to restrict the number of function execution/calls.

/**
 * normal throttle function
 * @param {*} fn
 * @param {*} delay
 * @returns
 */

satyam4p

import { useEffect, useRef } from "react";

const usePrevious = (value) => {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref.current;
};

satyam4p

import { useCallback, useRef } from "react";

const useDebounceHook = (fn, delay, immediate = false) => {
  const timerId = useRef();
  const debounce = useCallback(
    function () {
      let context = this;
      let args = arguments;
      //check if immediate flag is true so invoke the debounce immediately
      let callNow = immediate && !timerId.current;

satyam4p

class EventBus {
  static handlers = {};
  static on(eventName, handler, scope) {
    if (!EventBus.handlers[eventName]) {
      EventBus.handlers[eventName] = [];
    }

    EventBus.handlers[eventName].push({
      subscription: handler,
      scope,

satyam4p

import { useState, useEfftect, useRef } from "react";

const useStateWithcallback = (initialState) => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(null);

  const setStateWithCallback = (newState, callback) => {
    callbackRef.current = callback;
    setState(newState);
  };

satyam4p

//Problem Statement
//Implement a function in JavaScript that caches the API response for the given amount of time.
//If a new call is made between that time, the response from the cache will be returned,
//else a fresh API call will be made.

/**
 *
 * @param {*} expiryTime in ms
 */
function cachedApi(expiryTime) {