Real CRED Interview Experience

class LiveSearch {
  constructor(container, fetchFn) {
    this.container = container;
    this.fetchFn = fetchFn;
    this.activeIndex = -1;
    this.results = [];
    this.isOpen = false;
    this.abortController = null;

    this.render();
    this.bindEvents();
  }

  render() {
    this.container.innerHTML = `
      <div class="search-wrapper">
        <input type="text" class="search-input" placeholder="Search..."
               aria-autocomplete="list" aria-expanded="false" role="combobox">
        <div class="search-dropdown" role="listbox" hidden></div>
        <div class="search-loading" hidden>Loading...</div>
      </div>
    `;

    this.input = this.container.querySelector('.search-input');
    this.dropdown = this.container.querySelector('.search-dropdown');
    this.loading = this.container.querySelector('.search-loading');
  }

  bindEvents() {
    // Debounced input
    let timer = null;
    this.input.addEventListener('input', (e) => {
      clearTimeout(timer);
      const query = e.target.value.trim();

      if (!query) {
        this.close();
        return;
      }

      timer = setTimeout(() => this.search(query), 300);
    });

    // Keyboard navigation
    this.input.addEventListener('keydown', (e) => {
      if (!this.isOpen) return;

      switch (e.key) {
        case 'ArrowDown':
          e.preventDefault();
          this.activeIndex = Math.min(this.activeIndex + 1, this.results.length - 1);
          this.highlightItem();
          break;
        case 'ArrowUp':
          e.preventDefault();
          this.activeIndex = Math.max(this.activeIndex - 1, 0);
          this.highlightItem();
          break;
        case 'Enter':
          if (this.activeIndex >= 0) {
            this.selectItem(this.results[this.activeIndex]);
          }
          break;
        case 'Escape':
          this.close();
          break;
      }
    });

    // Click outside to close
    document.addEventListener('mousedown', (e) => {
      if (!this.container.contains(e.target)) {
        this.close();
      }
    });

    // Click on result
    this.dropdown.addEventListener('click', (e) => {
      const item = e.target.closest('[data-index]');
      if (item) {
        this.selectItem(this.results[parseInt(item.dataset.index)]);
      }
    });
  }

  async search(query) {
    // Cancel previous request
    if (this.abortController) this.abortController.abort();
    this.abortController = new AbortController();

    this.loading.hidden = false;

    try {
      this.results = await this.fetchFn(query, this.abortController.signal);
      this.activeIndex = -1;
      this.renderResults();
      this.open();
    } catch (err) {
      if (err.name !== 'AbortError') {
        this.results = [];
        this.renderResults();
      }
    } finally {
      this.loading.hidden = true;
    }
  }

  renderResults() {
    if (this.results.length === 0) {
      this.dropdown.innerHTML = '<div class="no-results">No results found</div>';
      return;
    }

    this.dropdown.innerHTML = this.results
      .map((item, i) => `
        <div class="search-item ${i === this.activeIndex ? 'active' : ''}"
             data-index="${i}" role="option">
          ${item.label}
        </div>
      `).join('');
  }

  highlightItem() {
    const items = this.dropdown.querySelectorAll('.search-item');
    items.forEach((el, i) => {
      el.classList.toggle('active', i === this.activeIndex);
    });
    // Scroll into view
    items[this.activeIndex]?.scrollIntoView({ block: 'nearest' });
  }

  selectItem(item) {
    this.input.value = item.label;
    this.close();
    // Dispatch custom event
    this.container.dispatchEvent(new CustomEvent('select', { detail: item }));
  }

  open() {
    this.isOpen = true;
    this.dropdown.hidden = false;
    this.input.setAttribute('aria-expanded', 'true');
  }

  close() {
    this.isOpen = false;
    this.dropdown.hidden = true;
    this.activeIndex = -1;
    this.input.setAttribute('aria-expanded', 'false');
  }
}

// Usage
const search = new LiveSearch(
  document.querySelector('#search-container'),
  async (query, signal) => {
    const res = await fetch(`/api/search?q=${query}`, { signal });
    return res.json();
  }
);

// React's reconciliation algorithm (diffing):

// Rule 1: Different element types → destroy and rebuild
// <div> → <span> = unmount div, mount span (even if children are same)

// Rule 2: Same element type → update only changed attributes
// <div className="old"> → <div className="new"> = update className only

// Rule 3: Lists use 'key' prop to identify items
// Without key: React diffs by index (breaks on reorder/insert)
// With key: React matches by key (correct updates, preserves state)

// Example where keys matter:
// ❌ Without key — reorder causes all items to re-render
{items.map((item, i) => <Item data={item} />)}
// React thinks: index 0 changed, index 1 changed, etc.

// ✅ With key — React knows which item moved
{items.map(item => <Item key={item.id} data={item} />)}
// React thinks: item-3 moved from position 0 to position 2

// Rule 4: React bails out early if:
// - Component returns same reference (React.memo + same props)
// - setState is called with the same value (Object.is comparison)

// The algorithm is O(n) — not O(n³) like generic tree diff
// Trade-off: It assumes elements at different levels are unrelated

// ANSWER: ALL 50 components re-render. Every single one.

// Why? Any component that calls useContext(MyContext) will re-render
// when the context value changes — regardless of whether it uses
// the specific field that changed.

const AppContext = createContext({ user: null, theme: 'light', cart: [] });

function Header() {
  const { user } = useContext(AppContext); // Only uses 'user'
  // BUT: re-renders when 'cart' changes too!
  return <h1>{user.name}</h1>;
}

// SOLUTIONS:

// 1. Split contexts by update frequency
const UserContext = createContext(null);    // Rarely changes
const CartContext = createContext([]);       // Changes often
const ThemeContext = createContext('light'); // Almost never changes

// 2. Memoize the consuming component
const Header = React.memo(function Header({ user }) {
  return <h1>{user.name}</h1>;
});
// Parent passes only what Header needs — memo prevents re-render

// 3. useMemo inside the consumer
function Header() {
  const { user } = useContext(AppContext);
  return useMemo(() => <h1>{user.name}</h1>, [user]);
}

// 4. Selector pattern (like Zustand/Redux)
// Only re-render when YOUR specific slice changes
// React doesn't have this natively for context (yet)

// The event loop cycle:
// 1. Execute all synchronous code (call stack empties)
// 2. Drain ALL microtasks (Promises, queueMicrotask, MutationObserver)
// 3. Execute ONE macrotask (setTimeout, setInterval, I/O, UI rendering)
// 4. Repeat from step 2

// Critical: ALL microtasks drain before the next macrotask
// This means microtasks can starve the UI!

console.log('sync 1');

setTimeout(() => console.log('macro 1'), 0);
setTimeout(() => console.log('macro 2'), 0);

Promise.resolve().then(() => {
  console.log('micro 1');
  // Microtask INSIDE a microtask — runs before any macrotask
  Promise.resolve().then(() => console.log('micro 2'));
});

queueMicrotask(() => console.log('micro 3'));

console.log('sync 2');

// Output: sync 1, sync 2, micro 1, micro 3, micro 2, macro 1, macro 2

// Danger: Infinite microtask loop blocks EVERYTHING
// ❌ This freezes the page:
function bad() {
  Promise.resolve().then(bad); // Never yields to macrotask queue
}

// Render cycle:
// Macrotask → Microtasks → requestAnimationFrame → Layout → Paint → next Macrotask

import { useState, useCallback, useMemo, memo } from 'react';

// Validation rules
const validators = {
  pan: (value) => {
    const regex = /^[A-Z]{5}[0-9]{4}[A-Z]$/;
    if (!value) return 'PAN is required';
    if (!regex.test(value)) return 'Invalid PAN format (e.g., ABCDE1234F)';
    return '';
  },
  aadhaar: (value) => {
    const digits = value.replace(/\s/g, '');
    if (!digits) return 'Aadhaar is required';
    if (!/^\d{12}$/.test(digits)) return 'Must be 12 digits';
    return '';
  },
};

// Memoized field component — only re-renders when ITS props change
const FormField = memo(function FormField({ label, value, error, onChange, formatter }) {
  return (
    <div className="form-field">
      <label>{label}</label>
      <input
        value={formatter ? formatter(value) : value}
        onChange={(e) => onChange(e.target.value.replace(/\s/g, ''))}
        className={error ? 'input-error' : ''}
      />
      {error && <span className="error-message">{error}</span>}
    </div>
  );
});

// Format Aadhaar as 4-4-4
function formatAadhaar(value) {
  const digits = value.replace(/\D/g, '').slice(0, 12);
  return digits.replace(/(\d{4})(?=\d)/g, '$1 ');
}

function KYCForm() {
  // Individual useState — changing PAN doesn't re-render Aadhaar
  const [pan, setPan] = useState('');
  const [aadhaar, setAadhaar] = useState('');
  const [errors, setErrors] = useState({});
  const [touched, setTouched] = useState({});

  // Stable callbacks with useCallback
  const handlePanChange = useCallback((value) => {
    const upper = value.toUpperCase().slice(0, 10);
    setPan(upper);
    if (touched.pan) {
      setErrors(prev => ({ ...prev, pan: validators.pan(upper) }));
    }
  }, [touched.pan]);

  const handleAadhaarChange = useCallback((value) => {
    const digits = value.replace(/\D/g, '').slice(0, 12);
    setAadhaar(digits);
    if (touched.aadhaar) {
      setErrors(prev => ({ ...prev, aadhaar: validators.aadhaar(digits) }));
    }
  }, [touched.aadhaar]);

  const handleSubmit = (e) => {
    e.preventDefault();
    const newErrors = {
      pan: validators.pan(pan),
      aadhaar: validators.aadhaar(aadhaar),
    };
    setErrors(newErrors);
    setTouched({ pan: true, aadhaar: true });

    const hasErrors = Object.values(newErrors).some(Boolean);
    if (!hasErrors) {
      console.log('Submit:', { pan, aadhaar });
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <FormField
        label="PAN Number"
        value={pan}
        error={touched.pan ? errors.pan : ''}
        onChange={handlePanChange}
      />
      <FormField
        label="Aadhaar Number"
        value={aadhaar}
        error={touched.aadhaar ? errors.aadhaar : ''}
        onChange={handleAadhaarChange}
        formatter={formatAadhaar}
      />
      <button type="submit">Verify KYC</button>
    </form>
  );
}

// ❌ Single state object — ALL fields re-render on ANY change
const [form, setForm] = useState({ pan: '', aadhaar: '', name: '', email: '' });

const handleChange = (field, value) => {
  setForm(prev => ({ ...prev, [field]: value }));
  // Problem: New object reference → entire form re-renders
  // Even memo'd children re-render because parent's state changed
};

// ✅ Individual useState — only changed field re-renders
const [pan, setPan] = useState('');
const [aadhaar, setAadhaar] = useState('');
// Changing pan doesn't trigger aadhaar field to re-render

// ✅ Alternative: useReducer for complex forms
const [state, dispatch] = useReducer(formReducer, initialState);
// Still one state, but you can optimize with proper shouldComponentUpdate

// ✅ Best for 10+ fields: Uncontrolled with refs
// Only read values on submit — zero re-renders during typing
function OptimizedForm() {
  const panRef = useRef();
  const aadhaarRef = useRef();

  const handleSubmit = () => {
    const values = {
      pan: panRef.current.value,
      aadhaar: aadhaarRef.current.value,
    };
    // Validate only on submit
  };

  return (
    <form onSubmit={handleSubmit}>
      <input ref={panRef} defaultValue="" />
      <input ref={aadhaarRef} defaultValue="" />
    </form>
  );
}

// Field B depends on Field A (e.g., City depends on State)

function DependentFields() {
  const [state, setState] = useState('');
  const [city, setCity] = useState('');
  const [cities, setCities] = useState([]);

  // When state changes, fetch cities and reset city selection
  useEffect(() => {
    if (!state) {
      setCities([]);
      setCity('');
      return;
    }

    let cancelled = false;
    fetchCities(state).then(data => {
      if (!cancelled) {
        setCities(data);
        setCity(''); // Reset dependent field
      }
    });

    return () => { cancelled = true; };
  }, [state]);

  return (
    <>
      <select value={state} onChange={e => setState(e.target.value)}>
        <option value="">Select State</option>
        {states.map(s => <option key={s} value={s}>{s}</option>)}
      </select>

      <select value={city} onChange={e => setCity(e.target.value)} disabled={!state}>
        <option value="">Select City</option>
        {cities.map(c => <option key={c} value={c}>{c}</option>)}
      </select>
    </>
  );
}