All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8664 bites
Page 43
React Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Rules of Hooks: Call Order Is Sacred
Hook calls must keep the same order every render because React maps them to state by array index. Only call hooks at the top level of React functions. Break the order and React desyncs, producing stale state or crashes.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
BEM: Self-Documenting CSS Class Names
BEM turns classes into a mini filesystem: Block__Element--Modifier. It prevents CSS collisions in large React codebases where many teams share a global stylesheet. The footgun is turning every nested tag into an element and creating comically long names.
BrowserRouter: Real URLs in React SPAs
BrowserRouter turns the address bar into a client-side navigation system, using real URLs without reloads. It is the default choice for SPAs that need shareable links.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.
Accessible React Forms: Labels, Focus, and Errors
Accessible React forms need real labels, keyboard focus, and error announcements, not just ARIA. Screen reader users must perceive inputs and validation without visual cues. The common footgun is placeholder text or divs instead of label elements with htmlFor.
Zustand Middleware: Intercept Every Set Call
Zustand middleware intercepts set calls to add logging, persistence, or devtools without touching business logic. Use it when updates need the same side effect, like localStorage sync.
Server Components, explained without the jargon
React Server Components render on the server and send the client a description of the result, not JavaScript. That means no bundle cost for server rendered parts and direct database access, with client components handling only the interactive pieces.
React interview cheatsheet: hooks rules in 60 seconds
The rules of hooks exist because React identifies each hook by call order, not by name. Call hooks only at the top level of a component or custom hook, never inside a loop, condition, or nested function, or state attaches to the wrong hook.
How vision, strategy, and roadmap relate
Vision is the long-term aspiration, strategy is the chosen path to it, the roadmap is time-bound execution that delivers the strategy.
Product Strategy: The 'Why' Behind Your Product
Product strategy is the 'why' behind your product, connecting its vision to business goals. It's the compass that guides development, not the feature-by-feature map. The common footgun is confusing strategy (the why) with the roadmap (the what and when).
What are the risks of a roadmap without product strategy?
Risks include building wrong things fast, orphaned features, and tradeoff paralysis.
How would you frame a major refactoring proposal using product strategy?
Reframing tech debt as delivery risk, not engineering chore. Tie refactoring to velocity loss and firefighting; shift accountability from dev-vs-ops fights to product ownership.
Strategy vs. Tactics: The Map vs. The Directions
Strategy is your destination and why you're going; tactics are the turn-by-turn directions. A product strategy defines the long-term goal, like 'capture the enterprise market,' while tactics are the specific feature launches to get there.
How do you assess architecture impact during a corporate pivot?
Tests business-technical alignment under strategic uncertainty. Strong answers map new outcomes to capability gaps, assess debt and migration cost, then co-own replanning with product. Red flag: proposing a full rewrite before understanding limits or ROI.
Product Roadmap: A Strategic Plan, Not a Feature List
A product roadmap is a strategic guide, not a rigid timeline, showing how work achieves long-term goals. It's used to align engineering, product, and leadership on priorities.
How would you validate strategic assumptions through shipped software?
Tests whether you embed validation into engineering delivery rather than treating it as pre-work. Strong answers cover assumption mapping, instrumented MVPs, tiered rollouts, kill criteria, and product-engineering feedback loops.
Market Segmentation: Don't Sell to Everyone
Market segmentation means you don't sell to everyone. It's about dividing your market into smaller, meaningful groups to target them with tailored strategies. This is used for focused ads or niche product features.
Critique the statement that product strategy should be fixed for two years
It tests adaptive strategy versus rigid roadmaps. A great answer notes short-term architecture stability, then details systemic risks: feature factories, wasted talent, telemetry blindness, and lock-in.