Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
What drives your choice between Zustand and Redux Toolkit at scale?
What it tests: matching state philosophy to constraints, not hype. Outline: weigh Zustand's minimal footprint against Redux Toolkit's DevTools and structured async patterns. Red flag: claiming one is always better regardless of team size or debugging needs.
How do you ensure a complex form is fully accessible?
Pair labels to inputs, move focus to first error on submit, and link aria-invalid to aria-describedby.
Explain the difference between Server and Client Components in Next.js
Server components run on the server with no client JS and access backends directly; client components ship JS and handle state.
How to implement a derived Redux slice performantly and maintainably?
This tests minimal state and memoized selector design. Use Reselect's createSelector to compute data from multiple slices, keeping state minimal and avoiding redundant work. A red flag is storing derived values in Redux or recalculating without memoization.
Is Tailwind maintainable at scale, and what patterns support your claim?
Tests your CSS architecture judgment with utility-first scaling patterns. Strong answers pick a side, citing three patterns: strict tailwind config, components hiding class soup, and sparing @apply.
Compare CSS Modules and runtime CSS-in-JS libraries across DX, performance, and dynamic styling
This tests build-time vs runtime style architecture trade-offs. A strong answer contrasts CSS Modules' static extraction with CSS-in-JS's prop-driven runtime injection, covers dynamic styling patterns, and weighs SSR and bundle costs.
How would you implement a custom useDebounce hook using useState and useEffect?
It tests effect cleanup and stale closure awareness. Use useState for the debounced value, useEffect to set a setTimeout when the input changes, and return a cleanup calling clearTimeout. Omitting cleanup leaks timers and fires stale values.
Why is Fiber's render phase interruptible but commit is not?
Render calculates changes on invisible tree; commit runs DOM mutations and lifecycles synchronously.
How do you handle user-specific content on a getStaticProps page?
Tests the static generation boundary. A strong answer serves a static shell, then hydrates user state client-side via useEffect or SWR. Red flag: claiming getStaticProps can read cookies at build time.
Implement A/B testing with Middleware rewrites and cookies
Sticky cookie, internal rewrite, vary cache on cookie, server-side analytics.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
How to structure translations and load locale content in App Router
Tests App Router i18n architecture with next-intl. Answer: locale-prefixed routes, JSON message files with ICU syntax, and next-intl APIs consumed in Server Components. Red flag: using client-side locale state instead of integrated routing.
Full Route Cache vs Data Cache and per-fetch cache control
Tests App Router's dual caching layers. Full Route Cache stores rendered HTML and RSC payload at build time; Data Cache stores raw fetch results across routes. Control a fetch with cache and next.revalidate options.
How do you enable basic i18n routing in Next.js?
This tests your knowledge of the built-in Pages Router i18n configuration in next.config.js. A good answer exports an i18n object with locales array, defaultLocale, and optionally localeDetection.
What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
What are the benefits of next/image over a standard img tag?
Tests knowledge of Next.js image infrastructure. Strong answers mention automatic optimization, lazy loading, blur placeholders for layout shift, and responsive srcset. Red flag: calling it a zero-impact wrapper or a styling component.
How do you implement response streaming in a Next.js Route Handler?
This tests Web Streams API mastery in Next.js. Strong answer: create a ReadableStream with TextEncoder, return it in a Response, and cite AI chat or large JSON as use cases. Red flag: suggesting Node res.write instead of standard Web Streams.
How would you use Next.js Middleware to protect /api/admin/* routes?
Match /api/admin/:path*, read the secure cookie, validate the token, return 401 or proceed.
How do you handle multiple HTTP methods in a single route.ts file?
Tests App Router Route Handler REST conventions. A strong answer exports named GET, PUT, DELETE handlers using NextRequest and NextResponse.json, plus 405 for unsupported methods.
How do you implement on-demand revalidation from a CMS webhook?
Tests Next.js cache invalidation and webhook security. Answer: secure Route Handler that calls revalidatePath or revalidateTag; next request rebuilds. Red flag: full redeploys, no secret check, or Server Component revalidate calls.