Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
Write the React.createElement() equivalent for this JSX
Tests JSX-to-JS compilation mechanics. Answer: createElement('a', {href: '/home', className: 'link'}, 'Go Home'). Children must be the third argument, not inside props. Red flag: nesting children in props or using an unquoted tag variable.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
What is the purpose of React's key prop and index key risks?
This tests React reconciliation. Keys give stable identity to match components across renders and preserve state. Indices break on reorder or delete, causing state bugs. A red flag: saying keys are only for performance or indices are harmless.
What are the two main ways to define a component in React?
Tests fluency in function and class syntax. Outline: show a function returning an h1; show a class with render() returning an h1; note functions are the React 19 default. Red flag: offering arrow vs function declaration as the two ways, or omitting render().
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.
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.
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.
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.
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.
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.
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.
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.
React Native's Legacy Bridge: The Async Bottleneck
The legacy bridge is an async JSON queue between JavaScript and native threads. You see it stutter when a FlatList scrolls or native events flood the pipe. Teams often optimize JavaScript when the real bottleneck is bridge saturation from redundant native…
Writing React Native iOS Modules in Swift
React Native speaks Objective-C on iOS, so Swift needs an Objective-C wrapper to join. Write logic in Swift, expose it via an Objective-C class, and register with RCT_EXPORT_MODULE. Skip the bridging header and the compiler never sees your Swift code.
Returning Promises from React Native Modules
A native module promise is an IOU across the bridge: JS asks native for a future result. Use them when native work like file encryption must run off the JS thread. If native code never resolves the promise, the JS await hangs forever and leaks.
Bridging Data Types in React Native
The React Native bridge only moves serializable data, so values crossing between JS and native must be primitives, arrays, or plain objects. You face this building native modules. The footgun is passing functions or class instances; the bridge strips them.
Building Android Native Modules in React Native
Native modules let JavaScript invoke Android APIs in Kotlin or Java. You build them when no library covers a device capability or you must reuse native code. The classic mistake is blocking the UI thread inside a @ReactMethod or mismatching getName() in JS.