React
262 bites tagged React — interview questions with model answers, and 60-second explainers.
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 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.
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. Matching state structure to complexity. Picking one pattern for all forms without discussing coupling.
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.
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 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.
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.
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.
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.
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.
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.
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. You know server routing fetches HTML pages, while client routing runs in the browser.
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.
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.
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.
How do CSS Modules solve global scope conflicts in React?
This tests build-time hashing and local scope. An answer explains that CSS Modules compile classes into unique hashes, scoping styles to the component, and shows the React import pattern styles.primary.
What is a stale closure in React hooks?
Tests closures and hook dependencies. A strong answer defines stale closure as capturing an outdated variable, shows a useEffect interval with stale state, and fixes it with dependencies and cleanup. Red flag: omitting cleanup or using refs blindly.
Pass server-fetched data from Server Components to nested Client Components
Tests RSC boundary awareness. Strong answer: fetch in the async Server Component, pass serializable props to nested Client Components. Red flag: proposing Context or useEffect inside the Server Component.
Describe combining useContext and useReducer for scalable feature state
This tests replacing prop drilling with a context-reducer pattern. A strong answer covers two contexts for state and dispatch, a provider wrapping the subtree, and a pure reducer. A red flag is one global context or async logic inside the reducer.
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.
Use useContext to provide theme state without prop drilling
This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.
Explain useReducer and when to prefer it over useState
Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.
What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
Get React bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.