DOM Manipulation and Browser APIs Questions

// useAsyncUnique.js
import { useRef, useState, useEffect } from 'react';

export function useAsyncUnique(checkUrl, delay = 500) {
  const [status, setStatus] = useState('idle'); // idle|pending|valid|invalid|error
  const controllerRef = useRef(null);
  const timerRef = useRef(null);

  const validate = (value) => {
    clearTimeout(timerRef.current);
    if (controllerRef.current) controllerRef.current.abort();
    if (!value) { setStatus('idle'); return; }

    setStatus('pending');
    timerRef.current = setTimeout(async () => {
      controllerRef.current = new AbortController();
      try {
        const res = await fetch(`${checkUrl}?q=${encodeURIComponent(value)}`, { signal: controllerRef.current.signal });
        const { available } = await res.json();
        setStatus(available ? 'valid' : 'invalid');
      } catch (e) {
        if (e.name === 'AbortError') return;
        setStatus('error');
      }
    }, delay);
  };

  useEffect(() => () => {
    clearTimeout(timerRef.current);
    if (controllerRef.current) controllerRef.current.abort();
  }, []);

  return { status, validate };
}

// Usage in a form component
function UsernameField() {
  const { status, validate } = useAsyncUnique('/api/check-username', 600);
  const [value, setValue] = useState('');
  return (
    <>
      <label htmlFor="username">Username</label>
      <input id="username" value={value}
        onChange={e => { setValue(e.target.value); validate(e.target.value); }}
        aria-invalid={status === 'invalid'}
        aria-describedby="username-help" />
      <div id="username-help" role="status" aria-live="polite">
        {status === 'pending' && 'Checking availability...'}
        {status === 'valid' && 'Username available.'}
        {status === 'invalid' && 'Username taken.'}
        {status === 'error' && 'Validation failed. Try again.'}
      </div>
    </>
  );
}

app.get('/api/check-username', async (req, res) => {
  const q = req.query.q || '';
  const available = !(await db.users.findOne({ username: q }));
  res.json({ available });
});

<button id="b1" onclick="alert('hi')">Inline</button>

const btn = document.getElementById('b2');
btn.onclick = () => console.log('one');
// later:
btn.onclick = () => console.log('overwritten');

const btn3 = document.getElementById('b3');
function a() { console.log('a'); }
function b() { console.log('b'); }
btn3.addEventListener('click', a);
btn3.addEventListener('click', b);
// remove:
btn3.removeEventListener('click', a);

// state
heights = {}            // itemId -> height
prefix = []             // prefix sums of heights (fallback to estimate if unknown)
totalHeight = 0
pool = []               // recycled DOM nodes

onScroll(scrollTop, viewportHeight) {
  startIndex = findIndexByOffset(prefix, scrollTop - buffer)
  endIndex = findIndexByOffset(prefix, scrollTop + viewportHeight + buffer)
  renderWindow(startIndex, endIndex)
}

renderWindow(start, end) {
  needed = items[start..end]
  recycleUnusedNodes(needed)
  for each item in needed {
    node = getNodeFromPoolOrCreate()
    setNodeTransform(node, offset = prefix[item.index])
    if (!heights[item.id]) {
      measureAndStoreHeight(node, item.id)
    }
    populateNode(node, item)
  }
  totalHeight = prefix[last] + lastHeightEstimate
  spacer.style.height = totalHeight + "px"
}

measureAndStoreHeight(node, id) {
  requestAnimationFrame(() => {
    h = node.getBoundingClientRect().height
    if (heights[id] !== h) {
      delta = h - (heights[id] || estimate)
      heights[id] = h
      updatePrefixSumsFrom(id.index, delta)
      totalHeight += delta
      // If items above viewport changed, adjust scrollTop to preserve viewport content
      if (measuredAboveViewport(id.index)) window.scrollTop += delta
      spacer.style.height = totalHeight + "px"
    }
  })
}

onPrepend(newItems) {
  insertAtStart(items, newItems)
  estimateAdded = sum(estimates of newItems)
  // adjust scroll to keep view stable
  container.scrollTop += estimateAdded
  updatePrefixSumsAfterInsert(newItems)
  // measurements will refine and further adjust in measureAndStoreHeight
}

// Uncontrolled (using ref)
function NameFormUncontrolled() {
  const ref = React.useRef();
  function handleSubmit(e) {
    e.preventDefault();
    console.log(ref.current.value);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input defaultValue="Alice" ref={ref} />
      <button type="submit">Submit</button>
    </form>
  );
}

// Controlled
function NameFormControlled() {
  const [name, setName] = React.useState('Alice');
  function handleSubmit(e) {
    e.preventDefault();
    console.log(name);
  }
  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

// create observer
const io = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      // swap attributes
      if (img.dataset.src) img.src = img.dataset.src;
      if (img.dataset.srcset) img.srcset = img.dataset.srcset;
      img.classList.remove('placeholder');
      // optional: listen for load/error to set classes
      img.addEventListener('load', () => {/* loaded UI */}, { once: true });
      img.addEventListener('error', () => {/* fallback UI */}, { once: true });
      observer.unobserve(img);
    }
  });
}, { root: null, rootMargin: '200px 0px', threshold: 0 });

// attach to images
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));