Real Groww Interview Experience

interface ListNode<T> {
  val: T;
  next: ListNode<T> | null;
}

// Part 1: Detect cycle (Floyd's Tortoise and Hare)
function hasCycle<T>(head: ListNode<T> | null): boolean {
  let slow = head;
  let fast = head;

  while (fast !== null && fast.next !== null) {
    slow = slow!.next;
    fast = fast.next.next;
    if (slow === fast) return true;
  }

  return false;
}

// Part 2: Find where cycle starts
function detectCycleStart<T>(head: ListNode<T> | null): ListNode<T> | null {
  let slow = head;
  let fast = head;

  // Phase 1: Find meeting point
  while (fast !== null && fast.next !== null) {
    slow = slow!.next;
    fast = fast.next.next;

    if (slow === fast) {
      // Phase 2: Find cycle start
      // Move one pointer to head, advance both by 1
      let pointer = head;
      while (pointer !== slow) {
        pointer = pointer!.next;
        slow = slow!.next;
      }
      return pointer;
    }
  }

  return null; // No cycle
}

// Why this works:
// When slow and fast meet, the distance from head to cycle start
// equals the distance from meeting point to cycle start (going around).
// Time: O(n), Space: O(1)

interface DLLNode<K, V> {
  key: K;
  value: V;
  prev: DLLNode<K, V> | null;
  next: DLLNode<K, V> | null;
}

class LRUCache<K, V> {
  private capacity: number;
  private cache: Map<K, DLLNode<K, V>>;
  private head: DLLNode<K, V>; // Dummy head (most recent)
  private tail: DLLNode<K, V>; // Dummy tail (least recent)

  constructor(capacity: number) {
    this.capacity = capacity;
    this.cache = new Map();

    // Initialize dummy nodes
    this.head = { key: null as K, value: null as V, prev: null, next: null };
    this.tail = { key: null as K, value: null as V, prev: null, next: null };
    this.head.next = this.tail;
    this.tail.prev = this.head;
  }

  get(key: K): V | -1 {
    const node = this.cache.get(key);
    if (!node) return -1;

    this.moveToFront(node);
    return node.value;
  }

  put(key: K, value: V): void {
    if (this.cache.has(key)) {
      const node = this.cache.get(key)!;
      node.value = value;
      this.moveToFront(node);
    } else {
      const newNode: DLLNode<K, V> = { key, value, prev: null, next: null };
      this.cache.set(key, newNode);
      this.addToFront(newNode);

      if (this.cache.size > this.capacity) {
        const lru = this.tail.prev!;
        this.removeNode(lru);
        this.cache.delete(lru.key);
      }
    }
  }

  private addToFront(node: DLLNode<K, V>): void {
    node.next = this.head.next;
    node.prev = this.head;
    this.head.next!.prev = node;
    this.head.next = node;
  }

  private removeNode(node: DLLNode<K, V>): void {
    node.prev!.next = node.next;
    node.next!.prev = node.prev;
  }

  private moveToFront(node: DLLNode<K, V>): void {
    this.removeNode(node);
    this.addToFront(node);
  }
}

// Usage
const cache = new LRUCache<number, string>(3);
cache.put(1, 'one');
cache.put(2, 'two');
cache.put(3, 'three');
cache.get(1);            // 'one' — moves to front
cache.put(4, 'four');    // Evicts key 2 (least recently used)
cache.get(2);            // -1 (evicted)

// Time: O(1) for both get and put
// Space: O(capacity)

type NestedObject = Record<string, unknown>;
type FlatObject = Record<string, unknown>;

function flattenObject(
  obj: NestedObject,
  prefix: string = '',
  seen: WeakSet<object> = new WeakSet()
): FlatObject {
  const result: FlatObject = {};

  if (seen.has(obj)) {
    return { [prefix]: '[Circular Reference]' };
  }
  seen.add(obj);

  for (const key of Object.keys(obj)) {
    const newKey = prefix ? `${prefix}.${key}` : key;
    const value = obj[key];

    if (
      value !== null &&
      typeof value === 'object' &&
      !(value instanceof Date) &&
      !(value instanceof RegExp)
    ) {
      const nested = flattenObject(value as NestedObject, newKey, seen);
      Object.assign(result, nested);
    } else {
      result[newKey] = value;
    }
  }

  return result;
}

// Test
const input = {
  a: { b: { c: 1 } },
  d: [10, 20],
  e: { f: null, g: { h: 'deep' } }
};

console.log(flattenObject(input));
// {
//   "a.b.c": 1,
//   "d.0": 10,
//   "d.1": 20,
//   "e.f": null,
//   "e.g.h": "deep"
// }

// Circular reference handling
const circular: NestedObject = { name: 'test' };
circular.self = circular;
console.log(flattenObject(circular));
// { "name": "test", "self": "[Circular Reference]" }

// Time: O(n) where n = total number of keys at all levels
// Space: O(n) for the result object + O(d) recursion depth

// Array.prototype.map polyfill
Array.prototype.myMap = function<T, U>(
  callback: (value: T, index: number, array: T[]) => U,
  thisArg?: unknown
): U[] {
  const result: U[] = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this) { // Handle sparse arrays
      result.push(callback.call(thisArg, this[i], i, this));
    }
  }
  return result;
};

// Array.prototype.filter polyfill
Array.prototype.myFilter = function<T>(
  callback: (value: T, index: number, array: T[]) => boolean,
  thisArg?: unknown
): T[] {
  const result: T[] = [];
  for (let i = 0; i < this.length; i++) {
    if (i in this && callback.call(thisArg, this[i], i, this)) {
      result.push(this[i]);
    }
  }
  return result;
};

// Array.prototype.reduce polyfill
Array.prototype.myReduce = function<T, U>(
  callback: (acc: U, value: T, index: number, array: T[]) => U,
  initialValue?: U
): U {
  let startIndex = 0;
  let accumulator: U;

  if (initialValue !== undefined) {
    accumulator = initialValue;
  } else {
    if (this.length === 0) {
      throw new TypeError('Reduce of empty array with no initial value');
    }
    accumulator = this[0] as unknown as U;
    startIndex = 1;
  }

  for (let i = startIndex; i < this.length; i++) {
    if (i in this) {
      accumulator = callback(accumulator, this[i], i, this);
    }
  }

  return accumulator;
};

// Tests
[1, 2, 3].myMap(x => x * 2);        // [2, 4, 6]
[1, 2, 3, 4].myFilter(x => x > 2);  // [3, 4]
[1, 2, 3, 4].myReduce((a, b) => a + b, 0); // 10

function deepClone<T>(obj: T, seen = new WeakMap()): T {
  // Primitives and null
  if (obj === null || typeof obj !== 'object') return obj;

  // Handle circular references
  if (seen.has(obj as object)) return seen.get(obj as object);

  // Handle special types
  if (obj instanceof Date) return new Date(obj.getTime()) as T;
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags) as T;
  if (obj instanceof Map) {
    const mapClone = new Map();
    seen.set(obj as object, mapClone);
    obj.forEach((val, key) => mapClone.set(deepClone(key, seen), deepClone(val, seen)));
    return mapClone as T;
  }
  if (obj instanceof Set) {
    const setClone = new Set();
    seen.set(obj as object, setClone);
    obj.forEach(val => setClone.add(deepClone(val, seen)));
    return setClone as T;
  }

  // Arrays and Objects
  const clone = (Array.isArray(obj) ? [] : {}) as T;
  seen.set(obj as object, clone);

  for (const key of Reflect.ownKeys(obj as object)) {
    (clone as Record<string | symbol, unknown>)[key] = deepClone(
      (obj as Record<string | symbol, unknown>)[key],
      seen
    );
  }

  return clone;
}

// Tests
const original = {
  date: new Date(),
  regex: /test/gi,
  nested: { a: [1, 2, { b: 3 }] },
  fn: () => 'hello', // Functions are preserved by reference
  map: new Map([['key', 'value']]),
};

const cloned = deepClone(original);
cloned.nested.a[2].b = 99;
console.log(original.nested.a[2].b); // Still 3 — deep clone works

// Scenario where removing useMemo BREAKS the app:
// Infinite loop with useEffect dependency

function SearchResults({ query }: { query: string }) {
  // ✅ With useMemo — stable reference, useEffect runs only when query changes
  const filters = useMemo(() => ({ query, page: 1 }), [query]);

  // ❌ Without useMemo — new object every render → infinite loop
  // const filters = { query, page: 1 };

  const [results, setResults] = useState([]);

  useEffect(() => {
    fetchResults(filters).then(setResults);
  }, [filters]); // filters changes every render without useMemo!

  return <div>{results.map(r => <Item key={r.id} data={r} />)}</div>;
}

// Scenario where removing useCallback BREAKS the app:
// Child component with useEffect depending on parent's callback

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

  // ✅ Stable reference — child's useEffect doesn't re-run
  const fetchData = useCallback(async () => {
    return await fetch('/api/data');
  }, []);

  // ❌ Without useCallback — child re-subscribes on every parent render
  // const fetchData = async () => fetch('/api/data');

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>Count: {count}</button>
      <DataSubscriber onFetch={fetchData} />
    </>
  );
}

function DataSubscriber({ onFetch }: { onFetch: () => Promise<Response> }) {
  useEffect(() => {
    const interval = setInterval(onFetch, 5000);
    return () => clearInterval(interval); // Cleanup + re-subscribe every render!
  }, [onFetch]); // Without useCallback, this runs EVERY render

  return <div>Subscribed</div>;
}

// React 18+: Automatic batching EVERYWHERE
// All these cause only ONE re-render:

function handleClick() {
  setCount(c => c + 1);     // Batched
  setFlag(f => !f);          // Batched
  setName('updated');        // Batched
  // → Single re-render with all 3 updates
}

// Even in async code (NEW in React 18):
async function handleSubmit() {
  const data = await fetch('/api');
  setLoading(false);         // Batched (React 18+)
  setData(data);             // Batched
  // → Single re-render
}

// setTimeout — also batched in React 18+:
setTimeout(() => {
  setCount(c => c + 1);     // Batched
  setFlag(f => !f);          // Batched
}, 1000);

// When batching does NOT happen (or you want to opt out):
import { flushSync } from 'react-dom';

function handleClick() {
  flushSync(() => {
    setCount(c => c + 1);   // Renders immediately
  });
  // DOM is updated here
  flushSync(() => {
    setFlag(f => !f);       // Renders again
  });
  // Two separate renders
}

// Pre-React 18: Batching only in React event handlers
// setTimeout, fetch .then, native event listeners → NOT batched

import { useState, useEffect, useCallback, useRef } from 'react';

// Custom hook: localStorage sync
function useLocalStorage<T>(key: string, initial: T): [T, (v: T) => void] {
  const [value, setValue] = useState<T>(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initial;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// Custom hook: price polling
function usePricePolling(symbols: string[], interval = 2000) {
  const [prices, setPrices] = useState<Record<string, number>>({});
  const [prevPrices, setPrevPrices] = useState<Record<string, number>>({});
  const timerRef = useRef<NodeJS.Timeout>();

  const fetchPrices = useCallback(async () => {
    if (symbols.length === 0) return;
    try {
      // Simulated API — replace with real endpoint
      const newPrices: Record<string, number> = {};
      symbols.forEach(s => {
        const base = prices[s] || 100 + Math.random() * 900;
        newPrices[s] = +(base + (Math.random() - 0.5) * 10).toFixed(2);
      });

      setPrevPrices(prices);
      setPrices(newPrices);
    } catch (err) {
      console.error('Price fetch failed:', err);
    }
  }, [symbols, prices]);

  useEffect(() => {
    fetchPrices(); // Initial fetch
    timerRef.current = setInterval(fetchPrices, interval);
    return () => clearInterval(timerRef.current);
  }, [symbols.join(',')]); // Re-subscribe when symbols change

  return { prices, prevPrices };
}

// Main Component
function StockWatchlist() {
  const [watchlist, setWatchlist] = useLocalStorage<string[]>('watchlist', []);
  const [input, setInput] = useState('');
  const { prices, prevPrices } = usePricePolling(watchlist);

  const addStock = () => {
    const symbol = input.trim().toUpperCase();
    if (symbol && !watchlist.includes(symbol)) {
      setWatchlist([...watchlist, symbol]);
      setInput('');
    }
  };

  const removeStock = (symbol: string) => {
    setWatchlist(watchlist.filter(s => s !== symbol));
  };

  return (
    <div className="watchlist">
      <div className="watchlist-input">
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && addStock()}
          placeholder="Add stock symbol (e.g., RELIANCE)"
        />
        <button onClick={addStock}>Add</button>
      </div>

      {watchlist.length === 0 ? (
        <p className="empty-state">No stocks in watchlist. Add one above.</p>
      ) : (
        <ul className="stock-list">
          {watchlist.map(symbol => {
            const price = prices[symbol];
            const prev = prevPrices[symbol];
            const change = price && prev ? price - prev : 0;

            return (
              <li key={symbol} className="stock-item">
                <span className="symbol">{symbol}</span>
                <span className={`price ${change > 0 ? 'up' : change < 0 ? 'down' : ''}`}>
                  {price ? `₹${price}` : 'Loading...'}
                  {change !== 0 && (
                    <span className="change">
                      {change > 0 ? '▲' : '▼'} {Math.abs(change).toFixed(2)}
                    </span>
                  )}
                </span>
                <button onClick={() => removeStock(symbol)}>✕</button>
              </li>
            );
          })}
        </ul>
      )}
    </div>
  );
}