References

React usePrevious Hook

Tracking the previous value of a prop or piece of state lets you diff renders, animate transitions, and detect specific change patterns. This snippet shows the canonical one-liner usePrevious, a useChanged variant that returns whether the value just changed, and a useHistory hook that keeps the last N values for undo / redo. All three are tiny but easy to get subtly wrong.

React useIsMounted Hook

Setting state on an unmounted component throws a warning in development and can mask real bugs in production. The useIsMounted hook gives async callbacks a way to bail out before they touch React state. This snippet covers the basic ref-based hook, a useSafeState wrapper that no-ops after unmount, and a useSafeCallback variant that protects the function itself.

Dynamic Object Property Access Patterns

Reading and writing object properties from a string key (or an array of keys) is one of the small skills that separates clean code from a sprawl of `if/else` chains. This snippet covers bracket access with `obj[key]`, safe nested reads with optional chaining and a path walker, and destructuring with computed and renamed keys. Use these patterns when keys come from config, query strings, or user input.

Freeze, Seal, and preventExtensions on Objects

JavaScript ships three integrity levels for objects (`Object.preventExtensions`, `Object.seal`, and `Object.freeze`) and they are easy to confuse because each silently relaxes one rule from the next. This snippet builds them up from least to most restrictive, shows the strict-mode behavior that turns silent failures into errors, and finishes with a recursive `deepFreeze` for nested config. Reach for these when you want a runtime guarantee that downstream code cannot mutate a shared object.

Cloning an Array (Shallow and Deep)

Most array clones in product code are shallow, which is exactly what `[...arr]`, `Array.from`, and `slice()` give you. The trap is nested data: shallow copies share inner references, so mutating a nested object inside the copy mutates the original. This snippet walks the modern shallow forms, the older idioms still in the wild, the `structuredClone` deep-copy answer for nested data, and an object-shaped sibling for contrast.

Value-In-Array and Value-In-Object Checks

"Is X in this array?" and "is X anywhere in this object?" sound like the same question but call for different tools. Arrays have `includes` (which handles `NaN`), `indexOf` (which does not), and `Set.has` for hot paths. Objects need `Object.values` for a flat scan and a recursive walk for nested structures. This snippet covers both, with the gotchas that bite: `NaN`, hot-path scans, and shared object identity.

JavaScript Object Reference and Key Coercion Traces

Six traces covering object-key stringification, reference vs literal equality, `Object.create` prototype chains, and shallow-copy aliasing with arrays.

JavaScript Array and Object Fundamentals Quiz

Test the day-one moves for working with arrays and objects: type-checking, copying, deduping, and the gotchas hiding under shallow vs deep clones.

JavaScript Immutability and References Quiz

Lock down objects with `Object.freeze`, build read-only properties with `Object.defineProperty`, and reason about why React leans on immutable updates.

Object Transformation Challenges

Six object-shape problems: building a tree from a flat array, valid-key extraction, chainable methods, stats reshaping, recursive leaf walking, and deep equality.

React Refs and Imperative Handles Quiz

Three drills on using refs to reach into the DOM, forwarding a ref through a wrapper component, and using useImperativeHandle to expose a controlled API.

JavaScript Immutable Object Key Removal: Two Approaches Quiz

Two seeded approaches to remove an object key without mutation (spread + delete, reduce + filter), plus two companions on destructure-and-drop and a deep-clone caveat.

JavaScript Object Values to Array: Two Approaches Quiz

Two seeded approaches to convert an object's values to an array (Object.values spread vs Object.keys.map) plus two companions on Object.entries and ordering pitfalls.

JavaScript Merge Two Objects: Three Approaches Quiz

Three seeded ways to merge two plain objects (spread, `Object.assign`, and a manual `for...in` copy), plus two companions on shallow-vs-deep semantics and on which approaches mutate the target.

React Auto-Focus With Refs: Two Approaches Quiz

Two approaches to auto-focusing an input in React (`useRef` + `useEffect` vs the native `autoFocus` prop), plus companions on focusing after async state and on focusing inside a portal.