Learning Log [Front-End]

// value in curly braces (not quotes), onChange updates state
const [text, setText] = useState("");
<input type="text" value={text} onChange={(e) => setText(e.target.value)} />

// plain let resets to 0 on every render — useless as a counter
let counter = 0;  // ✗

// useRef persists across renders without triggering one
const idRef = useRef(0);       // ✓ read with idRef.current
idRef.current++;               // increment — no re-render

// other options for unique IDs
id: Date.now()                 // fine for click-driven demos
id: crypto.randomUUID()        // cleanest, no setup

// ✗ runs on every render → schedules render → infinite loop
function FileTree({ input_list }) {
  const [toggles, setToggles] = useState(new Map());
  for (const item of input_list) setToggles(...);  // ✗ in render body

// ✓ seed once — lazy initializer, runs only on first mount
  const [toggles, setToggles] = useState(() => collectFolderIds(input_list));

// ✓ or derive from changing props/state inside an effect
  useEffect(() => {
    setToggles(collectFolderIds(input_list));
  }, [input_list]);
}

// ✓ derive from local variables, set state at the end
function updateCell(row, col) {
  const newValue = isXTurn ? "X" : "O";
  const alteredBoard = board.map((r, rIdx) =>
    r.map((cell, cIdx) => rIdx === row && cIdx === col ? newValue : cell)
  );
  const hasWinner = gameHasWinner(alteredBoard, newValue); // use alteredBoard, not board

  setBoard(alteredBoard);   // board is still old here
  setIsXTurn(!isXTurn);
  if (hasWinner) setWinner(isXTurn ? "Player X" : "Player O");
}

// ✗ board still shows old value after setBoard
setBoard(alteredBoard);
console.log(board);  // old board

export default function App() {
  // state — only what can't be computed
  const [users, setUsers] = useState([...]);
  const [selectedUserId, setSelectedUserId] = useState(null);
  const [firstName, setFirstName] = useState("");
  const [searchQuery, setSearchQuery] = useState("");

  // hooks + derived values (useMemo/useCallback go here, right after state)
  const filteredUsers = useMemo(() =>
    users.filter(u => fullName(u).includes(searchQuery)), [users, searchQuery]);
  const debouncedSearch = useCallback(debounce(setSearchQuery, 300), []);
  const canCreate = !selectedUserId && firstName.trim(); // cheap — no useMemo needed

  // handlers
  const handleCreate = () => { ... };
  const handleDelete = () => { ... };

  // JSX
  return ( ... );
}

setBoard(alteredBoard);   // doesn't re-render yet
setIsXTurn(!isXTurn);    // doesn't re-render yet
setWinner(playerName);   // doesn't re-render yet
                         // → ONE re-render here with all updates applied

// ✓ reads the latest state — safe when updates stack up
setDigits(prev => prev.map((d, i) => (i === index ? char : d)));

// ✗ reads `digits` from the closure — a snapshot from this render
setDigits(digits.map((d, i) => (i === index ? char : d)));

// classic proof: this only adds 1 — both read the same stale count
setCount(count + 1);
setCount(count + 1);
// functional form adds 2 — each call gets the previous result
setCount(c => c + 1);
setCount(c => c + 1);

// 1. RENDER — function runs top to bottom, builds JSX.
//    useEffect(fn, []) is RECORDED, not called. DOM not created yet.
// 2. COMMIT — React applies JSX to the real DOM; ref callbacks fire,
//    filling inputsRef.current.
// 3. PAINT — browser draws the updated DOM to the screen.
// 4. EFFECT — React runs the useEffect callback. Refs are populated now.

useEffect(() => {
  inputsRef.current[0]?.focus();  // works — the input exists by now
}, []);  // [] = run once, after the first commit

// simplest possible example — a counter
function reducer(count, action) {
  switch (action.type) {
    case "INC": return count + 1;
    case "DEC": return count - 1;
    case "RESET": return 0;
    default: return count;          // unknown action → no change
  }
}

const [count, dispatch] = useReducer(reducer, 0);  // 2 args: reducer, initial state

<button onClick={() => dispatch({ type: "INC" })}>+</button>   // fire an action
<button onClick={() => dispatch({ type: "RESET" })}>reset</button>

// 2 args — YOU call the function, React uses the returned value as initial state
useReducer(reducer, makeInitial());   // runs every render, result only used on the 1st

// 3 args (lazy) — you pass the function ITSELF (no parens); React calls it once on mount
useReducer(reducer, undefined, makeInitial);  // React runs makeInitial(undefined)
//                  ↑ 2nd arg is the input to makeInitial; unused here, so undefined

// ✗ renderCell is a regular function — useState here causes a React error
const renderCell = (value) => {
  const [isHovered, setIsHovered] = useState(false); // INVALID
};

// ✓ CellButton is a proper component — hooks are allowed
const CellButton = ({ value, onClick }) => {
  const [isHovered, setIsHovered] = useState(false); // valid
  return <button onClick={onClick}>{value}</button>;
};

// ✗ wrong — value is the whole props object, rest are undefined
const CellButton = (value, hoveredValue, onClick) => { ... }

// ✓ destructure the single props object
const CellButton = ({ value, hoveredValue, onClick }) => {
  return <button onClick={onClick}>{'{'}value{'}'}</button>;
};

<ul>
  {tasks.map((task) => (
    <li key={task.id}>
      <span>{task.summary}</span>
      <button onClick={() => removeTask(task.id)}>Delete</button>
    </li>
  ))}
</ul>

<form onSubmit={(e) => {
  e.preventDefault();   // required — prevents full page reload
  handleSubmit();
}}>
  <input value={name} onChange={(e) => setName(e.target.value)} />
  <input value={email} onChange={(e) => setEmail(e.target.value)} />
  <button type="submit">Submit</button>
</form>

// buttons declare their intent via name + value
<form onSubmit={onSubmit}>
  <button name="intent" value="create" disabled={!canCreate}>Create</button>
  <button name="intent" value="update" disabled={!canUpdate}>Update</button>
  <button name="intent" value="delete" disabled={!hasSelected}>Delete</button>
</form>

function onSubmit(e) {
  e.preventDefault();
  // submitter = the button that was clicked
  const formData = new FormData(e.target, e.nativeEvent.submitter);
  const intent = formData.get('intent'); // "create" | "update" | "delete"

  switch (intent) {
    case 'create': create(); break;
    case 'update': update(); break;
    case 'delete': del();    break;
    default: throw new Error(`Invalid intent: ${intent}`);
  }
}

// 1. window.confirm — zero code, ugly
if (window.confirm("Delete?")) setTasks(tasks.filter(t => t.id !== id));

// 2. custom modal — store pending action in state
const [pendingDeleteId, setPendingDeleteId] = useState(null);

{pendingDeleteId !== null && (
  <div className="modal-overlay" onClick={() => setPendingDeleteId(null)}>
    <div className="modal" onClick={(e) => e.stopPropagation()}>
      <p>Delete this task?</p>
      <button onClick={() => {
        setTasks(tasks.filter(t => t.id !== pendingDeleteId));
        setPendingDeleteId(null);
      }}>Confirm</button>
      <button onClick={() => setPendingDeleteId(null)}>Cancel</button>
    </div>
  </div>
)}

// controlled listbox — value must match an option's value
<select
  size={5}
  value={selectedId ?? ""}
  onChange={(e) => setSelectedId(e.target.value)}
>
  <option value="">-- select a user --</option>  // placeholder required (see gotcha)
  {users.map(user => (
    <option key={user.id} value={user.id}>  // must be option, not div
      {user.first} {user.last}
    </option>
  ))}
</select>

// useMemo — memoize a derived value (expensive compute, filtered list, etc.)
const filteredUsers = useMemo(
  () => users.filter(u => u.name.includes(query)),
  [users, query]   // recompute when users or query changes
);

// useCallback — memoize a function reference (debounce, stable callback for child props)
const debouncedSearch = useCallback(
  debounce((val) => setSearchQuery(val), 300),
  []   // [] = create once on mount, never recreate
);

const Cell = memo(function Cell({ r, c, state, onClick }) {
  return <button onClick={() => onClick(r, c)}>...</button>;
});

const inputsRef = useRef([]);  // .current is an array, NOT null

<input
  ref={(el) => { inputsRef.current[index] = el; }}  // el = the DOM node
  ...
/>

inputsRef.current[0]?.focus();          // focus first box
inputsRef.current[index + 1]?.focus();  // focus the next

// plain object coerces keys to strings
obj[1] === obj["1"];  // true — same key

// Map preserves types
mp.set(1, "a");
mp.get(1) !== mp.get("1");  // true — different keys

// object — matches by NAME
const { value, hoveredValue } = props;

// array — matches by POSITION, name it whatever you want
const [board, setBoard] = useState(...);
const [isXTurn, setIsXTurn] = useState(...);

const EMPTY = "EMPTY";

const a = { EMPTY: 1 };    // key is the literal string "EMPTY"
const b = { [EMPTY]: 1 };  // key is the VALUE of EMPTY → also "EMPTY"

// same today, but change the constant's value and only b follows:
const EMPTY2 = "empty";
({ EMPTY: 1 });     // key still "EMPTY" — now out of sync
({ [EMPTY2]: 1 });  // key "empty" — tracks the constant

// state → { color, next } config keyed by computed names
const EMPTY = "EMPTY", HIT = "HIT", MISS = "MISS";

const STATE_CONFIG = {
  [EMPTY]: { color: "gray",  next: HIT },
  [HIT]:   { color: "green", next: MISS },
  [MISS]:  { color: "red",   next: EMPTY },
};

// cells store the state itself; config derives color + next from it
STATE_CONFIG[cell].next;   // next state on click
STATE_CONFIG[cell].color;  // color to paint

for (const x of arr) console.log(x);    // 10, 20, 30 ✓
for (const i in arr) console.log(i);    // "0", "1", "2" — string keys ✗

// plain objects — use Object.entries
for (const [key, val] of Object.entries(obj)) { ... }

// Map — for...of directly
for (const [key, val] of myMap) { ... }

// sort strings alphabetically
arr.sort((a, b) => a.localeCompare(b));

// sort objects by name
items.sort((a, b) => a.name.localeCompare(b.name));

// combine with category sort — directories before files, then alpha
files.sort((a, b) => {
  const aIsDir = !!a.children;
  const bIsDir = !!b.children;
  if (aIsDir !== bIsDir) return aIsDir ? -1 : 1;
  return a.name.localeCompare(b.name);
});

/\d/.test(ch);        // true if ch is a digit 0-9  (\d === [0-9])
/[0-9]/.test(ch);     // same, written explicitly
/^[0-9]$/.test(ch);   // true only if EXACTLY one digit (anchored)
/^\d+$/.test(str);    // true if the WHOLE string is all digits

// TS enum
enum InputType { CELSIUS = "celsius", FAHRENHEIT = "fahrenheit" }

// JS equivalent — Object.freeze prevents mutation
const InputType = Object.freeze({ CELSIUS: "celsius", FAHRENHEIT: "fahrenheit" });

// TS function signature
function convert(value: string, from: InputType): number { ... }

// map — must return transformed value
vehicles.map(v => v.id);

// filter — must return boolean
vehicles.filter(v => v.stationarySeconds > 300);

// reduce — must return accumulator. Forgetting return → undefined next step
const freq = arr.reduce((acc, item) => {
  acc[item] = (acc[item] ?? 0) + 1;
  return acc;  // always return acc
}, {});

const byId = vehicles.reduce((acc, v) => {
  acc.set(v.id, v);
  return acc;
}, new Map());

// chaining — filter first (smaller array), sort, then map
const result = vehicles
  .filter(v => v.stationarySeconds > 300)
  .sort((a, b) => b.stationarySeconds - a.stationarySeconds)
  .map(v => v.id);

// _ convention — intentionally unused parameter
arr.map((_, index) => index * 2);

// ✗ sorts the source constant itself — reorders it for every other reader,
//   and the damage compounds on each render
const visible = VEHICLES.sort((a, b) => b.stoppedSeconds - a.stoppedSeconds);

// ✓ slice() makes a throwaway copy — sort chews on the copy, source is safe
const visible = VEHICLES.slice().sort((a, b) => b.stoppedSeconds - a.stoppedSeconds);

// ✓ modern: toSorted() returns a NEW sorted array, never mutates (no slice needed)
const visible = VEHICLES.toSorted((a, b) => b.stoppedSeconds - a.stoppedSeconds);

// pipeline order is left-to-right — each method runs fully, hands result to next
const visible = useMemo(() => VEHICLES
  .filter(v => statusFilter === 'all' || v.status === statusFilter)  // new array
  .filter(v => v.id.toLowerCase().includes(query.toLowerCase()))     // new array
  .slice()                                                          // copy (see note)
  .sort((a, b) => b.stoppedSeconds - a.stoppedSeconds),             // mutates the copy
[statusFilter, query]);

// get all empty cells from a 2D board
const availableCells = board.flatMap((row, rowIdx) =>
  row.flatMap((cell, colIdx) =>
    cell === "_" ? [{ row: rowIdx, col: colIdx }] : []
  )
);

// simpler example
[1, 2, 3].flatMap(x => [x, x * 2]);  // [1,2, 2,4, 3,6]

setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('sync');

// sync     ← call stack runs first
// promise  ← microtask queue drains before event queue
// timeout  ← last, even with 0ms delay

// ✗ setIsThinking runs immediately, not after delay
setTimeout(delay);
setIsThinking(false);

// ✓ everything after the delay goes inside the callback
timeoutId.current = setTimeout(() => {
  setIsThinking(false);
  updateCell(row, col);
}, delay);

// store id in useRef to cancel on reset
const timeoutId = useRef(null);
clearTimeout(timeoutId.current);  // in resetGame()

// progress bar filling over a fixed duration
const frameIdRef = useRef(null);

useEffect(() => {
  const startTime = performance.now();

  const step = (now) => {
    const elapsed = now - startTime;              // pure function of time, not a counter
    setPercent(Math.min((elapsed / DURATION) * 100, 100));
    if (elapsed < DURATION) frameIdRef.current = requestAnimationFrame(step);
  };

  frameIdRef.current = requestAnimationFrame(step);
  return () => cancelAnimationFrame(frameIdRef.current);  // only fires on unmount — [] means the effect itself never re-runs
}, []);

onFinish={() => onFinishHandler(index)}

const onFinishHandler = (completedIndex) =>
  setReadyIndex((prev) => Math.max(prev, completedIndex + 1));

// ✗ Wrong — clearTimeout runs immediately, cancelling the timer you just set
useEffect(() => {
  const timer = setTimeout(..., 1000);
  clearTimeout(timer);  // fires right now, not on cleanup
}, [currentColor]);

// ✓ Correct — return a function; React calls it later at cleanup time
useEffect(() => {
  const timer = setTimeout(() => {
    setCurrentColor(getNextColor());
  }, TRAFFIC_LIGHT_CONFIG[currentColor].duration);

  return () => clearTimeout(timer);  // React runs this when currentColor changes or component unmounts
}, [currentColor]);

// debounce — wait until user stops typing
const debouncedSearch = debounce((query) => fetchResults(query), 300);
input.addEventListener('input', (e) => debouncedSearch(e.target.value));

// lodash debounce + useMemo — the interview default for a search input
import debounce from "lodash/debounce";

const [query, setQuery] = useState("");

// useMemo memoizes the debounced FUNCTION (a value) so it's stable across renders.
// The timer id lives inside debounce's own closure — no manual useRef needed.
const debouncedSetQuery = useMemo(
  () => debounce((value) => setQuery(value), 300),
  []   // [] = create once. setQuery from useState is stable, so no deps
);

// cancel any pending call when the component unmounts
useEffect(() => () => debouncedSetQuery.cancel(), [debouncedSetQuery]);

<input onChange={(e) => debouncedSetQuery(e.target.value)} />

// long form — two awaits, the Response then the parsed body
const res = await fetch(url);        // Response object (headers, status)
const data = await res.json();       // .json() is async → parses body to JS object/array

// one-liner — same thing, chained
const data = await fetch(url).then((r) => r.json());

useEffect(() => {
  async function load() {              // async fn lives inside the effect
    setIsLoading(true);
    const ids = await fetch(JOB_STORIES_URL).then((r) => r.json());
    // ...use ids...
    setIsLoading(false);
  }
  load();                              // invoke it; effect returns nothing (or a cleanup fn)
}, []);  // [] = run once on mount

// ✗ sequential — each await blocks the next, 6 round-trips in series
const jobs = [];
for (const id of pageIds) {
  jobs.push(await fetch(itemUrl(id)).then((r) => r.json()));  // slow
}

// ✓ parallel — all 6 fire at once, one await for the whole batch
const jobs = await Promise.all(
  pageIds.map((id) =>
    fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`).then((r) => r.json())
  )
);

// all — need EVERYTHING. rejects on the FIRST failure (fail fast)
const [a, b] = await Promise.all([p1, p2]);

// allSettled — want every outcome. NEVER rejects
const rs = await Promise.allSettled([p1, p2]);
// [{status:'fulfilled', value}, {status:'rejected', reason}]
const ok = rs.filter(r => r.status === 'fulfilled').map(r => r.value);

// race — FIRST to settle wins, resolve OR reject. timeouts.
await Promise.race([fetchIt(), rejectAfter(5000)]);

// any — first SUCCESS wins. rejects only if ALL fail (AggregateError)
await Promise.any([mirror1(), mirror2(), mirror3()]);

const c = new AbortController();
fetch(url, { signal: c.signal })
  .then(r => r.json())
  .catch(err => {
    // MUST distinguish: your own cancel vs a real failure
    if (err.name === 'AbortError') return;   // expected
    setError(err);                                // real
  });
c.abort();

// ONE controller cancels MANY requests — share the signal
urls.forEach(u => fetch(u, { signal: c.signal }));
c.abort();  // all of them die

// built-in timeout, no manual setTimeout
fetch(url, { signal: AbortSignal.timeout(5000) });  // → TimeoutError

// compose several reasons to stop
fetch(url, { signal: AbortSignal.any([userCancel.signal,
                                      AbortSignal.timeout(5000)]) });

// React cleanup — cancel on unmount / dep change
useEffect(() => {
  const c = new AbortController();
  fetch(url, { signal: c.signal })...
  return () => c.abort();
}, [url]);

// TOTAL timeout — one clock, started once, never reset.
// "give up 60s after we began, no matter what"
const withTimeout = (p, ms) => Promise.race([
  p,
  new Promise((_, rej) =>
    setTimeout(() => rej(new Error('timeout')), ms))
]);

// IDLE timeout — clock RESETS on every arrival.
// "give up after 60s of NOTHING happening"
let timer;
const arm = () => {
  clearTimeout(timer);              // reset — this is the whole trick
  timer = setTimeout(finish, 60_000);
};
arm();                              // start the clock
onEachResponse(() => arm());        // progress → restart it

// urls ordered best → worst. Lower index = higher quality.
function fetchBestQuality(urls, { idleMs = 60_000 } = {}) {
  return new Promise((resolve, reject) => {
    const controller = new AbortController();
    let bestIdx  = Infinity;   // lowest index seen so far
    let bestData = null;
    let pending  = urls.length;
    let timer;

    const finish = () => {
      clearTimeout(timer);
      controller.abort();          // kill everything still in flight
      bestData !== null
        ? resolve(bestData)
        : reject(new Error('all sources failed'));
    };

    const arm = () => {             // IDLE timer — reset on progress
      clearTimeout(timer);
      timer = setTimeout(finish, idleMs);
    };

    urls.forEach((url, i) => {
      fetch(url, { signal: controller.signal })
        .then(res => {
          // fetch does NOT throw on 404 — check it yourself
          if (!res.ok) throw new Error(res.status);
          return res.json();
        })
        .then(data => {
          if (i < bestIdx) { bestIdx = i; bestData = data; }
          if (bestIdx === 0) return finish();  // can't beat best
          arm();                                // progress → reset
        })
        .catch(() => { /* this source is out; others may land */ })
        .finally(() => {
          if (--pending === 0) finish();       // nothing left
        });
    });

    arm();                                      // start the clock
  });
}

useEffect(() => {
  let alive = true;
  const c = new AbortController();

  fetchBestQuality(urls, { signal: c.signal })
    .then(d => { if (alive) setData(d); })
    .catch(e => {
      if (e.name === 'AbortError') return;   // our own cleanup
      if (alive) setError(e);
    });

  return () => { alive = false; c.abort(); };
}, [urls]);

const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);  // ← the missing line
const data = await res.json();

useEffect(() => {
  let ignore = false;                    // scoped to THIS run of the effect
  (async () => {
    const data = await fetchJson(url);
    if (ignore) return;                  // a newer run owns the state now
    setData(data);
  })();
  return () => { ignore = true; };       // cleanup runs before the next run
}, [url]);

// stronger: also cancels the network request
useEffect(() => {
  const controller = new AbortController();
  fetchJson(url, { signal: controller.signal })
    .then(setData)
    .catch((e) => { if (e.name !== "AbortError") setStatus("error"); });
  return () => controller.abort();
}, [url]);

1. one endpoint, full objects        → fetch once on mount, filter client-side
2. ids endpoint + item-by-id         → Promise.all hydration, one page at a time
3. independent endpoints             → Promise.all, never await in a loop
                                       Promise.allSettled if partial data is OK
4. changing input (search/filter)    → refetch + AbortController + debounce
5. pagination                        → offset ?page=  |  cursor ?cursor=  |  client slice

/* spacing */
margin: 16px;              // outside (transparent)
margin: 8px 16px;          // top/bottom  left/right
padding: 16px;             // inside (background shows)

/* sizing */
width: 80px;
height: 100%;
width: fit-content;        // shrink-wrap to content
max-width: 600px;

/* flexbox (apply to parent) */
display: flex;
flex-direction: column;    // row (default) | column
justify-content: center;   // main axis: flex-start | center | space-between
align-items: center;       // cross axis: flex-start | center | stretch
gap: 12px;
flex-wrap: wrap;

/* positioning */
position: relative;        // offset from normal flow, still takes up space
position: absolute;        // pinned to nearest relative ancestor
position: fixed;           // pinned to viewport (modals, navbars)
position: sticky;          // sticks at scroll threshold: top: 0
top: 0; right: 0;

/* text */
font-size: 24px;
font-weight: 600;
color: #333;
text-align: center;
text-decoration: none;     // remove underline from links

/* box */
background: white;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
opacity: 0.5;

/* misc */
cursor: pointer;
overflow: hidden;          // clip content that exceeds the box
z-index: 100;              // stacking order (higher = on top)
display: none;             // remove from layout entirely
visibility: hidden;        // invisible but still takes up space

/* 3×3 fixed board */
.board {
  display: grid;
  grid-template-columns: repeat(3, 80px);  // 3 cols, 80px each
  grid-template-rows: repeat(3, 80px);     // 3 rows, 80px each
  gap: 4px;
}

/* responsive card grid — fills available width */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   // 1fr = 1 fraction of remaining space
  gap: 16px;
}

// JSX — flat array, no row divs needed
<div className="board">
  {board.map((mark, i) => <Cell key={i} mark={mark} />)}
</div>

// inline — camelCase, string values, double braces (outer = JSX, inner = object)
<button style={{ fontSize: "24px", backgroundColor: "white", marginTop: "8px" }}>

// CSS file — kebab-case, no quotes on values
.cell-button {
  font-size: 24px;
  background-color: white;
  margin-top: 8px;
}
<button className="cell-button">  // className not class in JSX

// setting display:flex on li kills the bullet — put flex on an inner div
<li>
  <div style={{ display: "flex", gap: "4px" }}>
    <span>{task.summary}</span>
    <button onClick={() => removeTask(task.id)}>Delete</button>
  </div>
</li>

// conditional link — only render an anchor when a url exists
<b>
  {url ? (
    <a href={url} target="_blank" rel="noopener noreferrer">
      {title}
    </a>
  ) : (
    title   // no url → plain text, avoids href={undefined}
  )}
</b>

<table>
  <thead>                    // groups header row(s)
    <tr>
      <th scope="col">Vehicle</th>   // header cell, bold + announced as the column's label
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>                    // groups data rows
    <tr>                      // table row
      <td>wm-101</td>         // data cell — your content goes here
      <td>stopped</td>
    </tr>
  </tbody>
</table>

// onChange — the VALUE changed. Owns data entry + forward focus.
onChange={(e) => handle(e.target.value, i)}   // e.target.value is always a string

// onKeyDown — KEY identity. Owns Backspace-on-empty + arrow nav.
onKeyDown={(e) => {                            // e.key = "5" | "Backspace" | "ArrowLeft"...
  if (e.key === "Backspace" && digits[i] === "") focusPrev();
}}

// onPaste — has its OWN event; keys can't detect a paste.
onPaste={(e) => {
  const text = e.clipboardData.getData("text");  // the pasted string
}}

// form submit — stop the full-page reload that wipes React state
onSubmit={(e) => { e.preventDefault(); doSubmit(); }}

// empty-box Backspace — move focus back WITHOUT the native delete
// also erasing the previous box's digit (one press = one action)
if (e.key === "Backspace" && digits[i] === "") {
  e.preventDefault();
  focusPrev();
}

// paste — stop default insertion so YOUR logic fills the boxes
onPaste={(e) => { e.preventDefault(); spread(e.clipboardData.getData("text")); }}