Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Explain Svelte Action update and provide a reactive CSS example
Tests Svelte actions beyond initial mount. Strong answers explain update re-runs when parameters change, give a CSS custom properties example, and contrast with destroy. Red flag: suggesting the action re-runs from scratch or using reactive statements.
Matt Pocock's Free React TypeScript Tutorial
Matt Pocock's free React TypeScript tutorial teaches typing for hooks, props, events via hands-on exercises. Covers ComponentProps, useRef, and reading React's type defs to debug errors. Bookmark this if your team is adopting TypeScript.
What is the Virtual DOM and why does React use it?
This tests reconciliation as declarative abstraction, not raw speed. Good answers define VDOM as in-memory UI synced to the real DOM, explain declarative state mapping, and note fibers enable incremental rendering.
How do React Profiler flame and ranked charts pinpoint bottlenecks?
Flame chart width and color show duration with children; ranked chart sorts by self-time to surface the top component.
How do React Router v6.4 loaders change data fetching from useEffect?
This tests moving from fetch-on-render to render-as-you-fetch. Explain that loaders fire before render, removing useEffect waterfalls, while the router ignores stale promises on interruption. Red flag: calling loaders just useEffect outside the component.
What limits React inline styles and when are they still appropriate?
This tests React styling trade-offs. Outline: no pseudo-classes, media queries, or keyframes; maintenance and perf costs; good for dynamic state styling, prototyping, FOUC prevention, and small components. Red flag: claiming they are always bad or free.
How does React's scheduler prioritize updates with Fiber?
Tests cooperative scheduling. Cover Fiber's incremental units, the Scheduler's time-slicing loop, and Lanes where SyncLane and InputContinuousLane outrank DefaultLane. Red flag: claiming React uses a separate thread or that batching alone handles priority.
What is a Fiber in React Fiber architecture?
Tests reconciler internals. Strong answers define a Fiber as a unit of work with child, sibling, return, and alternate pointers; explain the linked-list tree enables incremental traversal; and note alternate connects current and work-in-progress trees.
How does React batch multiple setState calls in one event handler?
Tests your grasp of React batching and stale closures. React queues updates until the handler exits, so multiple literal setState calls with the same stale value update once, while updater functions queue sequentially.
Why did React replace the Stack Reconciler with Fiber?
Tests React scheduling limits. Good answers note the old reconciler was synchronous and recursive, blocking the main thread, while Fiber enables incremental rendering and interruptible work. Red flag: citing Hooks or vague speed claims without frame budgets.
Describe React's diffing algorithm and its O(n) heuristics
Different types unmount and rebuild; same types patch attributes and recurse; keys hint stable identity for children.
What are keys in React lists and why are they important?
Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.
Describe a robust automatic token refresh strategy in a React SPA
This tests token rotation without UX interruption in SPAs. Use HttpOnly cookies for refresh tokens, in-memory access tokens, an interceptor with a promise lock, and proactive background refresh.
How would you implement a basic protected route in React?
Hold auth in useState, pass user to protected components, and return Navigate to login when absent.
Server Component fetch vs. client-side SWR or React Query
Tests App Router cache boundaries and hydration costs. Strong answers weigh server TTFB and bundle savings against client interactivity, mutations, and background refetching. Red flag: defaulting to client fetching everywhere and ignoring waterfalls.
Difference between jest.fn, jest.spyOn, and jest.mock in React
Tests whether you distinguish Jest's three mocking scopes. Good answers: jest.fn for standalone callbacks; jest.spyOn to observe existing methods; jest.mock to swap entire modules. Red flag: using them interchangeably or saying spyOn replaces modules.
How do you unit test a custom React hook like useCounter?
This tests whether you know hooks must run inside a component and that renderHook provides that scaffold. A strong answer names renderHook and act, explains result.current access, and warns against calling hooks directly.
Test a React component fetching async data on mount
Whether you can assert on asynchronous DOM updates without race conditions. Mock the API, render, then use findBy or waitFor to assert on loading and loaded states. Red flag: using getBy right after render or forgetting to await async queries.
How would you unit test a React title component?
This tests React Testing Library's user-centric approach and Jest basics. A strong answer renders the component, queries the h1 by role or text, and asserts it is in the document. A red flag is using Enzyme shallow rendering or testing internal state.
How does React Testing Library's guiding principle influence query choice?
This tests whether you prioritize user-visible attributes over implementation details when selecting queries. A strong answer ranks getByRole, label, and text above testId because users interact with meaning, not data attributes.