Soumyarian98

import { useState } from 'react';

function useCopyToClipboard(): [boolean, (text: string) => Promise<void>] {
  const [isCopied, setIsCopied] = useState<boolean>(false);

  const copyToClipboard = async (text: string): Promise<void> => {
    if (!navigator?.clipboard) {
      console.warn('Clipboard not supported');
      return;
    }

Soumyarian98

import { useState, useEffect } from 'react';

const useIsClient = (): boolean => {
  const [isClient, setIsClient] = useState<boolean>(false);

  useEffect(() => {
    // This code runs only on the client
    setIsClient(true);
  }, []);

Soumyarian98

import { useState, useEffect } from 'react';

type VisibilityState = 'visible' | 'hidden';

export const usePageVisibility = (): VisibilityState => {
  const [visibilityState, setVisibilityState] = useState<VisibilityState>(
    document.visibilityState as VisibilityState
  );

  useEffect(() => {

Soumyarian98

declare global {
  interface Array<T> {
    atIndex(index: number): T | undefined;
  }
}

Array.prototype.atIndex = function <T>(index: number): T | undefined {
  if (index < 0) {
    index = this.length + index; // Convert negative index to positive
  }

Soumyarian98

import React, { useCallback } from "react";

export const ToDoApp = () => {
  const handleTaskClick = useCallback((taskId: string) => {
    return (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
      alert(`Task with ID: ${taskId} clicked`);
    };
  }, []);

  const tasks = [

Soumyarian98

class SequentialPromiseExecutor<T> {
  constructor(private tasks: Array<() => Promise<T>>) {}

  // Async generator to yield results one by one
  async *processQueue(): AsyncGenerator<Result<T>, void, unknown> {
    for (const task of this.tasks) {
      try {
        const result = await task();
        yield { success: true, value: result };
      } catch (e) {

Soumyarian98

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

export function useEventListener<K extends keyof HTMLElementEventMap>(
  eventName: K,
  handler: (event: HTMLElementEventMap[K]) => void,
  element: HTMLElement | Window = window
) {
  const savedHandler = useRef<(event: HTMLElementEventMap[K]) => void>();

  useEffect(() => savedHandler.current = handler, [handler]);

Soumyarian98

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

function useDebounceValue<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);
  const handlerRef = useRef<number>();

  useEffect(() => {
    if (handlerRef.current) clearTimeout(handlerRef.current);

    handlerRef.current = window.setTimeout(() => {

Soumyarian98

Kafka Architecture Overview

1. Kafka has high throughput but the storage time is very less. However, the storage time (retention period) can be configured based on the use case, and data can be stored for days, weeks, or indefinitely if there is enough storage.
2. Kafka has multiple producers and multiple consumers.
3. Inside Kafka, we have "topics".
4. Each topic is divided into partitions.
5. The user can set multiple rules to create different partitions.
6. Let's say we have a location topic, and the user can have two partitions based on the North Pole and South Pole.
7. Each consumer can subscribe to a partition.
8. Partitions work based on index, so if we have 3 partitions, the first one will be 0, the second one will be 1, and the third one will be 2.

Soumyarian98

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

const useMeasure = () => {
  const ref = useRef<HTMLDivElement>(null);
  const [bounds, set] = useState({ left: 0, top: 0, width: 0, height: 0 });
  const [ro] = useState(
    () => new ResizeObserver(([entry]) => set(entry.contentRect))
  );

  useEffect(() => {