All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
8668 bites
Page 128
Explain props in React and how parent components pass data to children
Define props as the single object argument; show destructuring; stress immutability and downward flow; note defaults.
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.
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.
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.
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.
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.
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.
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.
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.
Yup: Schema Builder for Runtime Validation
Yup is a validation pipeline: schemas parse, coerce, and assert untrusted data in one pass. Use it for API payloads or forms while TypeScript infers types automatically.
The act Utility in React Testing Library
React Testing Library re-exports everything from DOM Testing Library and explicitly lists act as a core top-level API method alongside render and renderHook, making it available as a named export from the framework package without requiring a separate wrapper.
Protected Routes: Server Gates, Not Hidden Links
A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.
Lists and Keys in React
React turns arrays into UI with map, yet each child needs a unique key prop or you get console warnings. Filter first, then map. The footgun: forgetting keys or failing to include stable unique IDs in your source data.
UI unresponsive during large data processing on main thread
Tests RN's dual-thread model and 16.67ms frame budget. Strong answers separate JS and UI thread roles, blame long JS tasks for dropped frames, and propose chunking data to yield the event loop. Red flag: claiming memoization alone solves thread blocking.
Upload Key vs App Signing Key
Your upload key is a disposable badge for Google Play, not the signature users install. You sign release AABs with it before uploading. Treating it as unlosable or committing it to git are common mistakes.
React Native Android Release Builds
A release build is the shipping crate: optimized JS, shrunk native code, and a cryptographic signature the Play Store trusts. Generate it before any Play Store upload. Lose your signing keystore and you can never update the app again; back it up immediately.
ESLint: Catch React Native Bugs Before Runtime
ESLint scans your React Native code before execution to catch syntax errors, unused imports, and missing accessibility labels in your IDE or CI pipeline. The footgun is ignoring warnings; silenced rules let bugs ship to production.
C++ as React Native's Cross-Platform Engine
C++ is the shared engine under React Native's New Architecture, powering JSI and cross-platform TurboModules. One C++ module replaces separate Android and iOS native code.
New Shadow Tree: Async Layout Engine
The New Shadow Tree is React Native's C++ layout engine that runs off the JS thread. It calculates Yoga flexbox asynchronously before mounting native views.
Enabling React Native's New Architecture
Enabling React Native's New Architecture swaps the async bridge for direct JSI calls. Set build flags to use Fabric and TurboModules. It is not a drop-in upgrade; legacy libraries often break without interop support or proper codegen types.