All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 16
Where and how to import global stylesheets in Next.js
This tests Next.js style entry points. In the App Router, import global CSS in the root layout.js; in the Pages Router, import it in _app.js. Never import global styles inside pages or components, since Next.js restricts global CSS to root-level files.
How would you create a styled Button accepting a variant prop
It tests prop interpolation for dynamic styling in CSS-in-JS. Good answers use styled.button with a function reading props.variant to map CSS rules in one component. A red flag is splitting into separate components per variant or using inline styles.
Implement a light/dark theming system with CSS-in-JS and React Context
This tests React Context architecture with CSS-in-JS theme injection. Strong answers include: a Theme Context with mode and toggle; ThemeProvider at the app root; consumption via useTheme or props.theme.
Runtime CSS-in-JS performance pitfalls in SSR Next.js
Runtime libs serialize styles per render, need style collection on the server, risk FOUC and double work in App Router.
CSS Custom Properties vs JS Theme Object in React
Tests render overhead vs CSS cascade. Strong answers: CSS variables update styles without re-renders, while JS theme objects in Context force subtree re-renders. Mention scoping, SSR FOUC, and setProperty interop.
What is the fundamental difference between client-side and server-side routing?
Server routes return full documents and reload; client routes swap JS views and use the History API without server requests.
Primary roles of BrowserRouter, Routes, and Route, and basic route setup
Tests v6 routing hierarchy. BrowserRouter provides history; Routes picks one match; Route maps path to element. Wrap Routes in BrowserRouter with nested Route elements for / and /about. Red flag: omitting the router or confusing Routes with Switch.
Why use Link over <a> for internal navigation?
This tests client-side routing vs full page reloads. A strong answer covers click interception, History API URL updates, and route prefetching. A red flag is claiming Link is purely stylistic or identical to a plain anchor.
Implement a protected /dashboard route in React Router
Tests declarative route guards versus imperative redirects in React Router 7. Strong answer: reusable ProtectedRoute wrapper with Navigate replace, auth state above Routes, and role checks.
How do you create a dynamic route like /products/:productId in React Router?
Tests React Router v6 dynamic segments and useParams. A strong answer declares path="products/:productId" on a Route, then extracts productId with useParams in the component. Red flag: using v5 props.match.params or manual URL parsing instead of the hook.
Compare Pages Router and App Router file-based routing conventions and capabilities
Tests your grasp of the folder-as-route paradigm shift. A strong answer notes that Pages files are routes while app folders are segments requiring page.js, and cites layout.js, loading.js, and error.js as nested primitives.
Explain Shallow Routing in Next.js Pages Router
This tests URL updates without re-running getServerSideProps or getStaticProps in the Pages Router. A strong answer defines shallow: true, cites query-state UI like filters or modals, and notes same-page and App Router limits.
How do you handle 404s in React Router and Next.js App Router?
Tests client versus server routing architecture. React Router uses a wildcard route returning HTTP 200 by default; Next.js App Router uses not-found.js for server-rendered 404s. Red flag: confusing the two routers or ignoring status code semantics.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
How do you handle a basic form submission in React?
Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.
Prefer multiple useState or useReducer for multi-field forms?
Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic.
How would you implement real-time client-side validation in React?
Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.
Advantages of dedicated React form libraries over manual state
Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.
How do you use a Server Action for form submission and useFormState?
Tests server-client form state orchestration. Outline: write a Server Action that validates and returns errors; pass it to useFormState for state; wire to form action and use useFormStatus for pending UI.
Optimize a large form with frequent state updates
Tests render propagation and memoization discipline. Strong answers note parent updates re-render children, extract inputs to localize state, useMemo for derived values, and stable callbacks. Red flag: useMemo everywhere without component boundaries.