Short lessons from the bugs, shortcuts, and “clever” ideas we’ve all shipped. Understand the why. Keep the fix.
Find your next lightbulb moment25 bite-sized episodes · English · Code included
const items = [];
{items.length && <Cart />}
25 episodes
The && operator returns an operand, not necessarily a boolean. An empty array has length 0, and React renders that number.
Record the slow interaction before reaching for memo. Check Network for request waiting, React Profiler for component rendering, and Chrome Performance for main-thread work.
The string "false" is non-empty, so converting it with Boolean or !! returns true. Neither operation parses the meaning of the word.
Don’t Repeat Yourself (DRY) concerns shared knowledge. Two policies can use the same arithmetic without having the same owner or reason to change.
A regular numeric TypeScript enum produces a runtime object with forward and reverse mappings. It does not disappear like a type alias.
Give a coding agent an observable outcome, constraints, and a check that matches the task. “Improve validation” leaves the finish line undefined.
Pass the controller’s signal to fetch. Creating an AbortController beside a request does not connect it to that request.
When two nearby components need the same value, start with their closest shared parent. One owner removes the need to synchronize two local copies.
A reducer calculates the next state from the current state and an action. Context makes a provided value available to descendants.
Components using the same query key and QueryClient share cached server state. Copying the result into another store creates another value to keep synchronized.
Keep a shared selected ID in Zustand and fetch the product through TanStack Query. Include that ID in the query key instead of duplicating the product snapshot.
Calling a Zustand hook without a selector subscribes to the whole store state. Destructuring count afterward does not narrow that subscription.
React Profiler measures subtree rendering, not the entire time from click to visible result. Expensive event-handler work can sit outside that measurement.
Coverage shows which code ran. It does not prove that assertions checked the correct behavior. A test can execute the whole function and miss the wrong answer.
Hiding or unmounting an input does not necessarily remove its value from the form’s state. Decide which values belong in the active submission.
forEach ignores the promises returned by async callbacks. Awaiting its undefined result does not wait for your uploads.
A zero-delay timer runs in a later task. A ready promise callback runs as a microtask after the current task, before another task starts.
Removing a panel does not remove its window listener. The callback can keep the old panel reachable and react after it closes.
Index keys identify positions. After sorting, React can keep a row’s local checked state while that position now represents a different item.
innerHTML parses a string into elements. In the isolated demo, an image error handler runs code; textContent displays the same string as text.
Jev is an AI (artificial intelligence) model from TypeSafe. It picks from allowed answers and returns probabilities. This example chooses a support team and sends uncertain cases to a person.
With verbatimModuleSyntax enabled, an inline type-only name can disappear while an empty JavaScript import remains. That import still evaluates the dependency.
TypeScript private controls ordinary access during type checking. Its modifier disappears, leaving an ordinary field that JSON.stringify includes in this example.
Older TypeScript targets expand optional chaining and nullish coalescing into checks and temporary values. The saved value prevents a repeated call to getUser.
Using calls a resource’s Symbol.dispose method when execution leaves its block. The ES2020 output adds resource helpers and a try/finally structure.
Try another word or explore all episodes.
Oops Driven Development is a notebook for the things we thought we understood—until the code disagreed. React, TypeScript, testing, and working with coding agents.
Every lesson starts with a clear question, follows the actual behavior, and shows a useful correction. The joke comes last. The explanation never gets cut for it.
Original code-led visuals. Synthesized English dialogue.
No gatekeeping. No “just use this library.”