Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Recommended App Router pattern to fetch shared data once for child routes
Tests App Router layout constraints and request deduplication. Answer: wrap the user fetch in React cache, call it from layout and child Server Components, and let Next.js deduplicate. Red flag: layout prop drilling or getServerSideProps.
How do loading.js and error.js integrate with Suspense and Error Boundaries?
Tests grasp of App Router conventions wrapping React primitives. loading.js suspends its segment for instant navigation feedback; error.js adds a client Error Boundary for child segment crashes. Wrong: assuming they are server-only or replace manual usage.
What is state hydration in Next.js SSR with Redux or Zustand?
Hydration attaches listeners to server HTML; serialize state to an escaped script tag; boot client store before React or markup is discarded.
How do you select a single property and prevent extra re-renders?
Tests selector granularity and reference equality in subscriptions. Great answer: return a primitive via a focused selector; for objects, memoize with createSelector or pass shallowEqual. Red flag: reaching for useMemo or React.memo before fixing the selector.
How does Next.js routing auto-implement code splitting?
Tests route-based code splitting versus manual setup. Strong answers note each page/route becomes its own chunk automatically, while client-only apps need explicit React.lazy and Suspense.
Child re-renders with unchanged props: function identity and useCallback fix
This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.
Compare HOCs and custom hooks for sharing logic
Tests your grasp of React's shift from wrapper-based to function-based logic reuse. Hooks eliminate wrapper hell and implicit props by extracting stateful behavior into plain functions without nesting components. Red flag: calling hooks just sugar.
Explain the difference between useMemo and useCallback
This tests whether useMemo caches values while useCallback caches functions, and why that matters for React.memo. A strong answer notes React.memo uses Object.is, so a new inline function prop triggers a child re-render. Red flag: claiming they are the same.
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint.
Why pass a function to useState for expensive initial values?
This tests your understanding of React's render-phase behavior. Without the function, expensive work reruns on every render and is thrown away; the initializer runs once only during mount.
What will count be after three setCount calls in a row?
Tests React state batching and stale closures. Answer: count is 1 because all three calls read the same closed-over value of 0. Fix: pass an updater function setCount(c => c + 1) three times so React queues each update.
Explain useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
Explain prop drilling and why it's a problem
Tests coupling in deep React trees. Good answers define prop drilling as forwarding props through unused intermediaries, cite coupling and refactor pain, and name Context or composition as fixes. Red flag: calling props bad or jumping to Redux without Context.
Describe two patterns for conditional rendering in JSX
First, early return with if/else for branches; second, ternary or logical AND inside JSX for inline toggles.
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.
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.
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.
Mapping JavaScript Props to Native Views
React Native bridges JS props to native views via annotated setters. Use it when wrapping platform views like maps or video players. The footgun is a missing annotation: the prop crosses the bridge but native never receives it, causing silent failures and…
npx: Execute Packages Without Installing Them
npx runs Node.js tools without installing them globally, fetching the latest version on demand. Use it for one-off scaffolding like create-react-app or CI build scripts. The footgun: it may silently run a stale cached copy if you omit a version tag.