🚀 250+ React.js Interview Questions & Answers 2026
From Beginner to Architect · Full‑Stack Integration (.NET, PHP, Java, Mobile) · Cross‑Platform · Latest React 19+ · AI Scenarios
📑 Inside This React Power Guide (250+ Items)
🌟 Beginner React Questions (55)
Core concepts that every React developer must know.
Beginner 1. What is React and what problems does it solve?
React is a JavaScript library for building user interfaces. It enables component‑based architecture, virtual DOM for efficient updates, and declarative UI. It simplifies creating large, interactive SPAs.
Beginner 2. Explain the Virtual DOM and how React uses it.
The Virtual DOM is a lightweight copy of the real DOM. React computes the difference (diffing) between previous and new Virtual DOM, then updates the real DOM minimally. This improves performance.
Beginner 3. What is JSX?
JSX is a syntax extension that looks like HTML but is compiled to React.createElement() calls. It makes UI code more readable and expressive.
Beginner 4. Write a simple functional component that displays "Hello, World".
function Greeting() {
return Hello, World!
;
}Beginner 5. What are props and how are they used?
Props (properties) are read‑only inputs passed from parent to child component. They make components reusable. Example: <User name="Alice" /> and function User({ name }) { ... }.
Beginner 6. What is state in React? How to use useState?
State is mutable data that affects rendering. const [count, setCount] = useState(0) creates a state variable and updater function.
Beginner 7. What are React Hooks? Name a few built‑in hooks.
Hooks let you use state and other React features in functional components. Built‑in: useState, useEffect, useContext, useReducer, useCallback, useMemo, useRef.
Beginner 8. Explain the useEffect hook with an example.
useEffect performs side effects (data fetching, subscriptions). Example: useEffect(() => { document.title = `Count: ${count}`; }, [count]); runs after render when count changes.
Beginner 9. What is the difference between a class component and a functional component?
Class components use this.state, lifecycle methods, and render(). Functional components use hooks and are simpler. React now favors functions.
Beginner 10. How to handle events in React (e.g., button click)?
function handleClick() { alert('Clicked'); }
return ;Beginner 11. What is conditional rendering? Show an example.
{isLoggedIn ? Beginner 12. How to render a list of items? Why is key important?
items.map(item => {item.name} )key helps React identify which items changed, improving performance.Beginner 13. What is the purpose of the key prop?
Keys give elements a stable identity. They must be unique among siblings. React uses them to reconcile the virtual DOM efficiently.
Beginner 14. How to style components in React? (inline, CSS modules, styled‑components)
Options: inline styles (style={{ color: 'red' }}), CSS stylesheets, CSS Modules (import styles from './App.module.css'), CSS‑in‑JS libraries like styled‑components.
Beginner 15. What is a fragment (<>) and why use it?
Fragments let you group a list of children without adding extra nodes to the DOM. <> ... </> or <Fragment>...</Fragment>.
Beginner 16. How to create a React app with Vite or Create React App?
npm create vite@latest my-app -- --template react
cd my-app && npm install && npm run devBeginner 17. What is the role of index.js and App.js?
index.js is the entry point, it renders <App /> into the DOM using ReactDOM.createRoot. App.js is the root component.
Beginner 18. How to pass data from child to parent component?
Pass a callback function as prop from parent. Child calls it with data: props.onSubmit(data).
Beginner 19. What is the difference between controlled and uncontrolled components?
Controlled: form data handled by React state (value={val}, onChange). Uncontrolled: DOM manages state, accessed via ref.
Beginner 20. What are refs and how to use useRef?
Refs provide a way to access DOM nodes or hold mutable values without re‑rendering. const inputRef = useRef(null); <input ref={inputRef} />.
Beginner 21. How to make an API call in React? (using fetch or axios)
useEffect(() => {
fetch('/api/data')
.then(res => res.json())
.then(data => setData(data));
}, []);Beginner 22. What is React.memo?
Higher‑order component that memoizes a component, skipping re‑render if props haven't changed (shallow comparison).
Beginner 23. How to prevent component re‑rendering?
Use React.memo, useMemo, useCallback, and avoid passing new object/function references unnecessarily.
Beginner 24. What are error boundaries?
Class components that implement componentDidCatch to catch JS errors in child component tree and display fallback UI.
Beginner 25. How to implement routing in React? (React Router)
import { BrowserRouter, Routes, Route } from 'react-router-dom';
Beginner 26. What is context API and how to use useContext?
Provides a way to pass data through the component tree without props drilling. const value = useContext(MyContext);
Beginner 27. How to handle forms in React? (controlled vs uncontrolled)
Use state for each input, update on change, handle submit. Libraries like Formik or React Hook Form simplify validation.
Beginner 28. What is the purpose of React.StrictMode?
Enables additional checks and warnings for development (e.g., double‑invoking certain functions to detect side effects).
Beginner 29. How to use environment variables in React?
Create .env file with REACT_APP_ prefix (CRA) or VITE_ prefix (Vite). Access via process.env.REACT_APP_API_URL or import.meta.env.VITE_API_URL.
Beginner 30. What are the lifecycle methods in class components and their equivalent hooks?
componentDidMount → useEffect(() => {}, []); componentDidUpdate → useEffect(() => {}, [deps]); componentWillUnmount → cleanup in useEffect.
Beginner 31. How to update state that depends on previous state?
Use functional form: setCount(prev => prev + 1). This avoids stale state.
Beginner 32. What is the difference between useState and useReducer?
useState for simple state; useReducer for complex state logic with actions, similar to Redux pattern.
Beginner 33. How to fetch data on component mount?
Use useEffect with empty dependency array. Ensure cleanup if needed.
Beginner 34. Explain the importance of immutable state updates.
React relies on immutability to detect changes. Mutating state directly can lead to bugs and missed re‑renders. Use spread or update functions.
Beginner 35. How to use TypeScript with React?
Use .tsx extension. Define interfaces for props and state. Example: interface Props { name: string; }.
Beginner 36. What is a portal in React?
ReactDOM.createPortal(child, container) renders a component outside its parent DOM hierarchy, e.g., modals.
Beginner 37. How to lazy load a component?
const LazyComp = React.lazy(() => import('./Comp'));
Loading... Beginner 38. What is the Suspense component?
Lets you display a fallback until its children finish loading (code splitting, data fetching with React Suspense for data).
Beginner 39. How to handle a 404 page with React Router?
Beginner 40. What is the difference between Link and NavLink?
NavLink adds active class when route matches. Link is basic navigation.
Beginner 41. How to pass query parameters with React Router?
navigate(`/search?q=${term}`);
// Read: useSearchParams()Beginner 42. What are the rules of hooks?
Only call hooks at the top level (not inside loops/conditions) and only from React functions.
Beginner 43. How to create a custom hook?
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth);
useEffect(() => { const handler = () => setWidth(window.innerWidth); window.addEventListener('resize', handler); return () => window.removeEventListener('resize', handler); }, []);
return width;
}Beginner 44. What is prop drilling and how to avoid it?
Passing props through many intermediate components. Solutions: Context API, state management (Redux, Zustand), component composition.
Beginner 45. How to use CSS modules in React?
Create Component.module.css. Import import styles from './Component.module.css' and apply: <div className={styles.container}>.
Beginner 46. How to conditionally apply a class?
or use classnames library.
Beginner 47. How to use useCallback and useMemo?
useCallback memoizes a function; useMemo memoizes a computed value. Dependencies array triggers recomputation.
Beginner 48. What is the purpose of useRef for persisting values?
Stores a mutable value that doesn't cause re‑render on change. Often used for timers or previous state.
Beginner 49. How to debug a React app?
React DevTools, console.log, breakpoints in browser DevTools, StrictMode warnings.
Beginner 50. What is React Developer Tools?
Browser extension that allows inspection of component hierarchy, state, props, and performance profiling.
Beginner 51. How to handle side effects that need cleanup?
Return a cleanup function from useEffect: return () => { unsubscribe(); }
Beginner 52. What is the difference between useEffect with and without dependencies array?
No array: runs after every render. Empty array: runs once after mount. With deps: runs when any dep changes.
Beginner 53. How to use React with Bootstrap?
Install bootstrap, import CSS, and use classes. Or use React‑Bootstrap which provides React components.
Beginner 54. What is the significance of React.Fragment?
Allows grouping multiple elements without adding extra nodes to the DOM, keeping layout clean.
Beginner 55. How to pass all props from parent to child without specifying individually?
(spread operator). Use sparingly to avoid unnecessary re‑renders.
🔵 Intermediate & Full‑Stack Integration (65)
Deeper React patterns and connecting to ASP.NET Core, PHP/Laravel, Java/Spring, Node.js.
Intermediate 56. Explain React reconciliation algorithm.
React builds a fiber tree. On update, it diffs the new element tree with the previous one, using key and type. It only updates changed nodes. This is O(n) heuristic.
Intermediate 57. What are React fibers?
Fiber is a reimplementation of the core reconciliation algorithm. It allows splitting rendering work into chunks, prioritizing updates (Concurrent Mode).
Intermediate 58. How to implement a higher‑order component (HOC)?
function withLoader(Component) {
return function WithLoader({ isLoading, ...props }) {
return isLoading ? Loading... :
Intermediate 59. What is the render props pattern?
Passing a function as a prop to control rendering. Example: <DataProvider render={data => <Display data={data} />} />.
Intermediate 60. How to optimize performance with useMemo and useCallback?
Memoize expensive calculations and function references to prevent unnecessary re‑renders of child components that rely on reference equality.
Intermediate 61. What is the purpose of useLayoutEffect?
Similar to useEffect but fires synchronously after all DOM mutations. Used for reading layout and synchronously re‑rendering (e.g., measuring DOM).
Intermediate 62. How to use context effectively without causing re‑renders?
Split contexts for different data, use memoization, or use libraries like useContextSelector (external). Alternatively, use state management.
Intermediate 63. What is useImperativeHandle?
Customizes the instance value exposed to parent when using ref. Used in conjunction with forwardRef.
Intermediate 64. How to forward refs to a child component?
const Child = React.forwardRef((props, ref) => );
Intermediate 65. Explain the difference between class and functional components with hooks regarding lifecycle.
Hooks allow functional components to use state and mimic lifecycle methods via useEffect, often with cleaner code and less duplication.
Intermediate 🔗 ASP.NET Core 66. How to set up a React frontend with an ASP.NET Core Web API backend?
Use dotnet new react template, or separate projects. Configure CORS, serve React build from wwwroot or use proxy during development. Example: dotnet new react creates both.
Intermediate 🔗 ASP.NET Core 67. How to handle authentication with JWT between React and ASP.NET Core?
Backend issues JWT on login. React stores token (memory or httpOnly cookie). Use Axios interceptor to attach Authorization header. Backend validates with AddJwtBearer.
Intermediate 🔗 ASP.NET Core 68. How to implement SignalR real‑time communication in React?
Install @microsoft/signalr. Create a custom hook that establishes connection, listens for events, and provides invoke methods. Backend: app.MapHub<ChatHub>("/chat").
Intermediate 🔗 PHP / Laravel 69. How to connect React to a Laravel API?
Laravel serves API routes under /api. React uses fetch or Axios. Configure CORS via fruitcake/laravel-cors. For SPA auth, use Laravel Sanctum with cookie‑based sessions.
Intermediate 🔗 PHP 70. How to handle file upload from React to Laravel?
React creates FormData, sends via POST. Laravel controller: $request->file('avatar')->store('avatars');. Ensure CORS and CSRF token for SPA.
Intermediate 🔗 Java / Spring Boot 71. How to build a full‑stack app with React and Spring Boot?
Spring Boot exposes REST APIs. React uses Axios. Configure CORS in Spring Boot via @CrossOrigin or global config. For auth, Spring Security with JWT.
Intermediate 🔗 Java 72. How to handle OAuth2 login with React and Spring Boot?
Use react-oauth2-code-pkce or @react-oauth/google for social login. Spring Boot acts as resource server; validate tokens.
Intermediate 📱 Mobile 73. What is React Native and how does it relate to React.js?
React Native allows building mobile apps using React components but targeting native UI (not DOM). Shares concept of components, state, props, and hooks.
Intermediate 📱 Mobile 74. How to share code between React web and React Native?
Use a shared folder with common logic (state, API calls, utilities). Use platform‑specific file extensions (.web.tsx, .native.tsx). React Native for Web can reuse components.
Intermediate 📱 Mobile 75. How to integrate a React Native app with a Flutter module?
Flutter can be embedded as a module in existing Android/iOS apps. React Native can communicate via platform channels or by using a bridge; typically they remain separate but can share data via native APIs.
Intermediate 76. How to implement client‑side routing in React with dynamic routes?
Access with useParams().
Intermediate 77. What is React Query (TanStack Query) and how does it simplify data fetching?
It provides hooks for fetching, caching, synchronizing, and updating server state. Handles loading/error states, pagination, and invalidation.
Intermediate 78. How to implement infinite scroll using React Query?
const { data, fetchNextPage } = useInfiniteQuery({
queryKey: ['items'],
queryFn: ({ pageParam }) => fetchPage(pageParam),
getNextPageParam: (lastPage) => lastPage.nextCursor,
});
// Use IntersectionObserver to trigger fetchNextPage
Intermediate 79. What is Redux and when would you use it?
Predictable state container for JS apps. Useful for large applications with complex state shared across many components. Redux Toolkit simplifies setup.
Intermediate 80. Explain Redux Toolkit's createSlice.
Combines reducers and actions in one place. Uses Immer for immutable updates. Example: const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment(state) { state.value++ } } });
Intermediate 81. What are Redux middleware? Provide example of thunk and saga.
Middleware intercepts dispatched actions. Redux Thunk allows async logic. Redux Saga uses generator functions to handle side effects. Both can manage API calls.
Intermediate 82. How to use useSelector and useDispatch from React‑Redux?
const value = useSelector(state => state.counter.value);
const dispatch = useDispatch();
dispatch(increment());
Intermediate 83. What is Zustand? How does it compare to Redux?
Zustand is a lightweight state management library with a simpler API. No boilerplate, direct store hooks. Good for small to medium apps.
Intermediate 84. How to create a global theme (dark/light mode) with Context API?
Create ThemeContext with provider, state, and toggle function. Use useContext in components. Apply CSS variables or class to body.
Intermediate 85. How to implement authentication with React Router (protected routes)?
function PrivateRoute({ children }) {
const auth = useAuth();
return auth ? children :
Intermediate 86. How to use useNavigate programmatically?
const navigate = useNavigate();
navigate('/dashboard', { state: { from: 'login' } });
Intermediate 87. What are portals and how to create a modal with them?
return ReactDOM.createPortal(..., document.getElementById('modal-root'));
Intermediate 88. How to test React components? (Jest + React Testing Library)
import { render, screen } from '@testing-library/react';
test('renders greeting', () => { render(
Intermediate 89. What is snapshot testing?
Renders a component and compares to a stored JSON snapshot. Useful for detecting unintended UI changes. Use Jest.
Intermediate 90. How to mock API calls in tests?
Use jest.mock or msw (Mock Service Worker) to intercept fetch calls and return predefined responses.
Intermediate 91. What is the difference between shallow rendering and render in testing?
shallow (Enzyme) renders only the component, not its children. React Testing Library prefers full DOM rendering and user‑centric testing.
Intermediate 92. How to use React.lazy with named exports?
Use intermediate module that re‑exports as default: export { MyComponent as default } from './MyComponent'.
Intermediate 93. How to implement a debounced search input in React?
useEffect(() => {
const timer = setTimeout(() => setDebouncedValue(value), 300);
return () => clearTimeout(timer);
}, [value]);
Intermediate 94. What is useId hook?
Generates unique IDs for accessibility attributes. Stable across server/client rendering.
Intermediate 95. Explain the new React 19 features (Actions, useOptimistic, useFormStatus).
React 19 introduces Actions for form handling, useOptimistic for optimistic UI updates, and useFormStatus to get pending state of form. Great for better DX.
Intermediate 🤖 AI 96. How to integrate OpenAI API in a React app?
Create a backend endpoint that calls OpenAI (to protect API key). React frontend sends user prompt via fetch, displays streamed response.
Intermediate 97. How to use Web Workers in React?
Create a worker file. Use new Worker(new URL('./worker.js', import.meta.url)). Post messages and handle with onmessage.
Intermediate 98. What is the purpose of dangerouslySetInnerHTML?
Sets raw HTML, but may expose to XSS attacks. Use with sanitization (DOMPurify).
Intermediate 99. How to integrate a chart library (Chart.js, Recharts) in React?
Install react-chartjs-2 or recharts. Pass data as props. Render inside component.
Intermediate 100. What are composite components and compound component pattern?
Components that work together, sharing implicit state via context. Example: <Tabs><Tab>...</Tab><Tabs>.
Intermediate 101. How to implement a custom hook for form validation?
function useForm(initialValues, validate) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const handleChange = (e) => { setValues({...values, [e.target.name]: e.target.value}); };
const handleSubmit = () => { const errs = validate(values); setErrors(errs); return Object.keys(errs).length === 0; };
return { values, errors, handleChange, handleSubmit };
}
Intermediate 102. How to implement a toast notification system using Context?
Create a ToastContext with addToast method. Provider renders a toast container that shows active toasts.
Intermediate 103. What is the difference between server‑side rendering (SSR) and static site generation (SSG)?
SSR renders page on each request (Next.js getServerSideProps). SSG builds HTML at build time (Next.js getStaticProps). Both improve SEO.
Intermediate 104. How to set up Next.js for React development?
npx create-next-app@latest. Next.js provides file‑based routing, SSR, API routes, and many optimizations out of the box.
Intermediate 105. 🔗 ASP.NET Core How to deploy a React app with an ASP.NET Core backend to IIS?
Build React (npm run build). Copy output to wwwroot. Publish ASP.NET Core app. Configure URL Rewrite for client‑side routing.
Intermediate 106. 🔗 PHP How to server‑side render React with a PHP backend (using Node)?
Use a Node SSR server alongside PHP. Or use react-php-v8js (V8Js extension) to render React components in PHP – rare and complex.
Intermediate 107. 📱 Mobile How to implement push notifications in React Native?
Use Firebase Cloud Messaging (FCM) with react-native-firebase. Handle token registration and incoming messages.
Intermediate 108. How to use environment variables in Next.js?
Prefix with NEXT_PUBLIC_ for client side. Server‑side only envs remain secret. Example: process.env.NEXT_PUBLIC_API_URL.
Intermediate 109. What is getServerSideProps and getStaticProps?
Next.js functions to fetch data. getServerSideProps runs on each request; getStaticProps runs at build time.
Intermediate 110. How to implement internationalization (i18n) in React?
Use libraries like react-intl or next-i18next. Load translations JSON, provide via context, use <FormattedMessage> or t('key').
Intermediate 111. How to create an accessible (a11y) React app?
Use semantic HTML, aria attributes, keyboard navigation, focus management. Tools: eslint-plugin-jsx-a11y, axe.
Intermediate 112. What is the difference between useMemo and useCallback in terms of value vs function?
useMemo returns a memoized value; useCallback returns a memoized function reference. Both depend on dependency array.
Intermediate 113. How to handle animations in React?
Use CSS transitions/animations, or libraries like Framer Motion (motion.div), react‑spring. Declarative animation with ease.
Intermediate 114. What is the difference between React Router v5 and v6?
v6 replaced Switch with Routes, element prop, relative links, useNavigate instead of useHistory, better nested routing.
Intermediate 115. How to use useSearchParams?
const [searchParams, setSearchParams] = useSearchParams();
const q = searchParams.get('q');
setSearchParams({ q: 'new' });
Intermediate 116. How to handle file downloads in React?
fetch('/api/file').then(res => res.blob()).then(blob => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a'); a.href = url; a.download = 'file.pdf'; a.click();
});
Intermediate 117. How to use React.StrictMode double invocation to find side effects?
In development, StrictMode intentionally double‑invokes functions like reducer, initializer, state updater to detect impure rendering. Fix side effects.
Intermediate 118. What is useTransition hook?
Returns a startTransition function for non‑urgent updates. Allows marking state updates as transitions that can be interrupted.
Intermediate 119. How to use useDeferredValue?
Defers a value to allow urgent updates to happen first. Example: const deferredQuery = useDeferredValue(query) for search suggestions.
Intermediate 120. 🔗 Java How to upload a file from React to a Spring Boot multipart endpoint and show progress?
Use Axios with onUploadProgress. Spring Boot controller: @PostMapping(consumes = MULTIPART_FORM_DATA). Track progress in state.
🟣 Expert & Advanced Integration (55)
Expert 121. Explain React Server Components (RSC) and how they work.
RSCs run only on the server, never on client. They can directly access backends. Zero bundle size. They streamed from server. Used in Next.js App Router.
Expert 122. What is the use hook? (React 19)
use can read the value of a resource like a Promise or context. It can be called conditionally, unlike other hooks. Example: const data = use(promise).
Expert 123. How to implement a custom reconciler? (React Reconciler)
Use react-reconciler package to create a custom renderer for non‑DOM targets (e.g., PDF, canvas). Define host config.
Expert 124. What are the internals of the Fiber architecture?
Fiber nodes represent units of work. React builds a fiber tree, schedules work using priority lanes. Work can be paused/aborted (Concurrent Mode).
Expert 125. How does React handle concurrency? (Concurrent Features)
Features like useTransition, useDeferredValue, Suspense, and streaming SSR allow React to interrupt rendering for higher‑priority updates, keeping UI responsive.
Expert 126. How to optimize server‑side rendering with streaming?
React 18 renderToPipeableStream streams HTML chunks to the browser as soon as they are ready, reducing TTFB and enabling selective hydration.
Expert 127. Explain selective hydration.
React hydrates parts of the page independently. If a part is suspended (e.g., data fetching), other parts can become interactive. Improves performance.
Expert 128. How to use React with WebAssembly modules?
Load WASM via WebAssembly.instantiateStreaming. Expose functions to React via bridge code. Call from event handlers or effects.
Expert 129. 📱 Mobile How to share business logic between React and React Native in a monorepo?
Use a shared package with hooks, reducers, API clients. Use Yarn workspaces or Nx. Platform‑specific UI components live in app packages.
Expert 130. 🔗 ASP.NET Core How to implement gRPC‑Web client in React?
Use @protobuf-ts/grpcweb-transport or grpc-web generated clients. Enable gRPC‑Web on ASP.NET Core server. Call from React.
Expert 131. 🔗 Java How to handle real‑time updates using Server‑Sent Events (SSE) from Spring Boot in React?
Spring Boot controller produces MediaType.TEXT_EVENT_STREAM_VALUE. React uses EventSource API, wrapping in a custom hook.
Expert 132. 🔗 PHP How to handle WebSockets with Laravel and React (via Pusher)?
Laravel broadcasting with Pusher or Laravel WebSockets. React uses laravel-echo and pusher-js. Listen on channels.
Expert 133. How to implement a micro‑frontend architecture with React (Module Federation)?
Use Webpack Module Federation to share and compose React micro‑frontends at runtime. Each deployed independently.
Expert 134. How to manage shared state across micro‑frontends?
Use event bus, custom events, or a shared state library loaded via federation. Browser’s CustomEvent works across micro‑frontends.
Expert 135. What is the React Profiler and how to use it?
Component that measures rendering performance. Wrap part of tree: <Profiler id="Navigation" onRender={callback}>...</Profiler>. Use React DevTools profiler tab.
Expert 136. How to avoid unnecessary re‑renders with React.memo and custom comparison?
const areEqual = (prevProps, nextProps) => prevProps.item.id === nextProps.item.id;
export default React.memo(MyComponent, areEqual);
Expert 137. How to implement a context that only updates a subset of consumers?
Split context into multiple independent contexts. Or use useContextSelector from external library (RFC 119). React itself doesn't have selector.
Expert 138. How to create a custom hook that syncs state with localStorage?
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) ?? initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [key, value]);
return [value, setValue];
}
Expert 139. How to use AbortController to cancel fetch requests in React?
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal }).then(res => ...).catch(err => { if (err.name !== 'AbortError') throw err; });
return () => controller.abort();
}, [url]);
Expert 140. 🤖 AI How to build a smart chatbot UI in React with streaming AI responses?
Use fetch with ReadableStream or EventSource to consume streamed tokens. Update React state progressively.
Expert 141. How to implement a drag‑and‑drop file tree using react-dnd?
Define drag sources and drop targets. Manage tree state with useReducer. Update structure on drop.
Expert 142. How to build a virtualized list for huge datasets? (react‑window, react‑virtuoso)
Render only visible rows. Use FixedSizeList from react-window. Provide itemCount, itemSize.
Expert 143. How to handle complex animations with framer-motion (layout animations, shared layout)?
layoutId for shared element transitions.
Expert 144. What is React Fast Refresh and how to configure it?
Enables instant feedback when editing components without losing state. CRA/Vite include it by default.
Expert 145. How to implement a custom Webpack configuration in a React project (e.g., CRA eject or CRACO)?
Use CRACO or eject. Customize loaders, plugins, aliases, or use Vite which is configurable via vite.config.js.
Expert 146. How to set up module aliases for cleaner imports?
// vite.config.js: resolve: { alias: { '@': '/src' } }
Then import Button from '@/components/Button'.
Expert 147. How to implement a custom ESLint plugin for React component naming conventions?
Use AST traversal. Check function/component name follows PascalCase. Leverage eslint-plugin-react as base.
Expert 148. How to use React.Children utilities for manipulating children?
React.Children.map(children, child => React.cloneElement(child, { extraProp: true }));
Expert 149. How to create a compound component that uses React.Children and cloneElement?
Parent iterates children, checks for specific component type (via child.type), and injects props.
Expert 150. How to avoid prop drilling with useReducer and context?
Combine useReducer with createContext. Provide state and dispatch from a provider. Consumer access via useContext.
Expert 151. How to implement an error boundary that resets state?
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
componentDidCatch(error, info) { logError(error, info); }
render() { if (this.state.hasError) return Something went wrong.
; return this.props.children; }
}
Expert 152. 🔗 ASP.NET Core How to implement a custom authentication flow with React and ASP.NET Core Identity?
ASP.NET Core Identity provides endpoints. React sends credentials, gets cookie or token. Use withCredentials: true for cookie auth.
Expert 153. 🔗 Java How to secure a React app with Spring Security and OAuth2 (Keycloak)?
Configure Keycloak adapter in Spring. React uses keycloak-js or react-oidc-context. Validate token on backend.
Expert 154. 📱 Mobile How to build a React Native module that bridges to native iOS/Android (Kotlin, Swift)?
Create a native module class extending ReactContextBaseJavaModule (Android) or RCTBridgeModule (iOS). Expose methods to JS.
Expert 155. How to use React Native with TypeScript and shared types?
Define common types in a shared package. Use .tsx files. Configure tsconfig.json for React Native.
Expert 156. How to implement code splitting with React Router and lazy loading?
const Profile = React.lazy(() => import('./Profile'));
Expert 157. How to measure and improve React bundle size?
Use webpack-bundle-analyzer or Vite's build.rollupOptions visualizer. Remove unused dependencies, use dynamic imports, tree shaking.
Expert 158. How to implement a custom React.createRoot container (multi‑root app)?
Create multiple root elements and render separate React trees: createRoot(document.getElementById('root1')).render(. They share nothing.
Expert 159. What is the difference between render and hydrate?
render completely replaces DOM content. hydrate attaches event listeners to server‑rendered HTML without re‑creating nodes.
Expert 160. How to use React.Suspense for data fetching (React 18+) with libraries like Relay or SWR?
Suspense can wait for async components/promises. SWR or React Query can integrate with Suspense by throwing promises.
Expert 161. How to implement a complex form with dynamic fields and validation (React Hook Form + Zod)?
const { register, handleSubmit, formState: { errors } } = useForm({ resolver: zodResolver(schema) });
Expert 162. How to use useSyncExternalStore to subscribe to an external store?
const state = useSyncExternalStore(store.subscribe, store.getSnapshot);
Used for Redux, Zustand, etc.
Expert 163. How to handle memory leaks in React effects?
Cleanup subscriptions, timers, event listeners in the effect's return function. Use AbortController for fetch.
Expert 164. How to implement a custom hook that debounces a value?
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => { const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]);
return debounced;
}
Expert 165. How to build a reusable dropdown component with keyboard navigation?
Manage isOpen state, focus index, handle ArrowDown, ArrowUp, Escape, Enter. Use useRef for list items.
Expert 166. How to implement a themeable component library with styled‑components or vanilla extract?
Define a ThemeProvider with a theme object. Components use styled.div with theme props or useTheme hook.
Expert 167. How to use useImperativeHandle with an imperative API (e.g., focus)?
useImperativeHandle(ref, () => ({ focus: () => inputRef.current.focus() }), []);
Expert 168. What is React.unstable_act in testing?
Ensures that all updates have been processed before assertions. React Testing Library wraps act automatically.
Expert 169. How to test async components with React Testing Library?
render(
Expert 170. 🤖 AI How to create an AI‑powered code generation plugin for a React IDE?
Use VS Code extension API, send selected code to AI API, replace selection with returned snippet.
Expert 171. 📱 Mobile How to integrate React Native with Flutter via platform channels?
Create a Flutter module and embed in native app. React Native can communicate with Flutter engine using native bridge method calls.
Expert 172. How to use React.Suspense with React.lazy and error boundaries together?
Expert 173. How to implement a custom useEvent hook? (React proposed)
useEvent returns a stable function that always sees latest state without effect dependencies. (RFC) Similar to useRef + useLayoutEffect wrapper.
Expert 174. How to handle large form submissions with file upload progress in React?
Use Axios onUploadProgress event. Update progress bar state. Use FormData for files.
Expert 175. How to implement a micro‑interaction/animation library for React components?
Use framer-motion with motion components, variants, and AnimatePresence for enter/exit animations.
Expert 176. How to create a custom renderer for React (e.g., for Figma plugin)?
Use react-reconciler, implement host config with methods like createInstance, appendChild. Bridge to target platform.
Expert 177. What are the trade‑offs between React Context and Redux for state management?
Context can cause unnecessary re‑renders if not split. Redux provides more control, middleware, devtools. Choose based on complexity.
Expert 178. How to implement a design system with React and Storybook?
Create atomic components, document in Storybook. Use addons for a11y, controls. Build and publish as npm package.
Expert 179. 🔗 PHP How to use Inertia.js to connect React with Laravel?
Inertia acts as a bridge; React components are server‑side rendered by Laravel, but client‑side navigation feels like SPA. No API needed.
Expert 180. How to upgrade a large React codebase from class components to functional components with hooks?
Refactor gradually. Convert one component at a time, extract logic into custom hooks. Use codemods for automated conversion.
🔴 Most Expert / Architecture (45)
Architect 181. Design a scalable frontend architecture for a multi‑tenant SaaS product.
Use monorepo (Nx), shared UI library, per‑tenant theming, feature flags, dynamic config loading at runtime, lazy load tenant‑specific modules.
Architect 182. How would you structure a React project to support web, mobile (React Native), and desktop (Electron)?
Leverage platform‑specific file extensions (.web.ts, .ios.ts). Share business logic (hooks, state) in common packages. Use React Native for Web for some components.
Architect 183. How to implement a micro‑frontend shell that supports multiple frameworks (React, Vue, Angular)?
Use single‑spa or Webpack Module Federation. Each micro‑frontend is independent. Shell provides navigation and shared services.
Architect 184. 🔗 ASP.NET Core How to build a high‑performance real‑time collaborative whiteboard with React, SignalR, and Canvas?
React handles UI, Canvas for drawing. SignalR sends drawing operations to server which broadcasts. Use CRDT for conflict resolution.
Architect 185. 🔗 Java How to design an event‑driven architecture with React frontend, Spring Boot backend, and Apache Kafka?
Backend publishes events to Kafka. React consumes events via WebSocket or SSE from a server that subscribes to Kafka topics.
Architect 186. How to achieve zero‑downtime deployments for a React SPA?
Serve static files from CDN with versioned URLs. Use index.html with cache busting. Deploy new version side‑by‑side, update DNS/load balancer.
Architect 187. How to implement offline‑first experience in React with IndexedDB and service workers?
Use Workbox for service worker caching. Store data in IndexedDB via idb or Dexie. Sync when online using Background Sync.
Architect 188. How to optimize Core Web Vitals (LCP, FID, CLS) in a React app?
LCP: optimize images, server render, preload critical CSS. FID: code splitting, web workers, minimize main thread. CLS: set dimensions for ads/images.
Architect 189. How to implement a custom React rendering engine for a smart TV platform?
Use react-reconciler to create a custom host config that outputs to TV’s native UI framework (e.g., Lightning).
Architect 190. How to build a design‑to‑code pipeline (Figma → React components)?
Use Figma API to export design tokens. Generate React components with a code generator (plop, yeoman) or use tools like figma-react.
Architect 191. How to manage feature flags in a React application at scale?
Use a service like LaunchDarkly. Fetch flags on app load, cache. Wrap flagged features with a FeatureFlag component that checks flags.
Architect 192. How to implement a plugin system where third‑party developers can extend a React app?
Define plugin interface (e.g., React components with a certain API). Load plugin bundles dynamically at runtime. Use import() and render.
Architect 193. How to use React with a GraphQL backend (Apollo Client) and implement optimistic UI?
const [addTodo] = useMutation(ADD_TODO, {
optimisticResponse: { __typename: 'Mutation', addTodo: { id: -1, text, __typename: 'Todo' } },
update(cache, { data }) { ... }
});
Architect 194. How to build a custom bundler for React using esbuild?
Use esbuild API to bundle JSX/TSX with React imports. Write a script that watches and serves. Vite already uses esbuild.
Architect 195. How to implement a React Native app with shared code for iOS, Android, and Web?
Use React Native for Web in combination with Expo. Write once, run on all platforms. Use platform‑specific files when needed.
Architect 196. 🤖 AI How to integrate AI‑driven personalization (recommendations) in a React e‑commerce app?
Backend (Node/Python) ML model provides recommendations API. React fetches and displays. Track user interactions to improve model.
Architect 197. How to implement a real‑time collaborative text editor with React, CRDT (Yjs), and WebRTC?
Use yjs for shared document, y-webrtc for peer‑to‑peer sync. Bind to a textarea or custom editor. React uses useEffect to observe changes.
Architect 198. How to build a React app that can be embedded as a widget on any website?
Build as a small bundle, render to a specific div. Use shadow DOM to isolate styles. Provide a loader script.
Architect 199. How to handle authentication with multiple identity providers (Google, Facebook, Azure AD) in React?
Use library like next-auth (Next.js) or react-oidc-context. Configure multiple providers, unify user object.
Architect 200. How to migrate from Create React App to Vite without breaking changes?
Move src to new Vite project. Update imports: replace process.env.REACT_APP_ with import.meta.env.VITE_. Update index.html entry.
Architect 201. How to implement a custom ReactDOM client for a non‑browser environment (e.g., Node)?
Create a custom host config for react-reconciler that outputs to console, string, or custom format.
Architect 202. How to implement a state machine (XState) in React for complex UI flows?
import { useMachine } from '@xstate/react';
const [state, send] = useMachine(machine);
Define states and transitions.
Architect 203. How to use React.unstable_Tracing for performance tracing?
(Legacy) It was part of experimental scheduler tracing. Use React Profiler or User Timing API instead.
Architect 204. How to build a React Native module that communicates with a Flutter screen?
Flutter screen embedded via FlutterEngine. React Native communicates via native module bridge (Android/iOS) that invokes Flutter channel.
Architect 205. How to implement a cross‑platform theme system for React Native and React Web?
Create a shared theme object (colors, fonts). Use ThemeProvider with styled-components/native or custom hooks. Platform‑specific adaptations.
Architect 206. How to handle large lists in React Native with FlatList optimization?
Use getItemLayout, maxToRenderPerBatch, windowSize, removeClippedSubviews. Avoid inline functions.
Architect 207. How to implement a custom navigation for React Native that works like React Router?
Use @react-navigation/native. Define Stack, Tab navigators. Can share navigation state with Redux.
Architect 208. How to use React with Deno and Fresh framework?
Fresh is a Deno framework based on Preact (React‑like). Write islands of interactivity, server‑side rendering with JSX.
Architect 209. How to build a React app that can dynamically load remote components at runtime (plugin architecture)?
Fetch component code (JS bundle) and use eval? Better: use Module Federation to load remote chunks, or iframe with postMessage.
Architect 210. How to implement a custom error tracking and logging system in React?
Use an ErrorBoundary that sends errors to a service (Sentry). Wrap critical sections. Log user actions.
Architect 211. How to optimize React app for accessibility (WCAG 2.1 AA)?
Use semantic HTML, correct heading hierarchy, aria labels, keyboard navigation, color contrast, screen reader testing.
Architect 212. How to implement a React application shell architecture for PWAs?
Service worker caches the app shell (HTML, CSS, JS). Dynamic content loaded via API. Skeleton UI for instant loading.
Architect 213. What are the security best practices for React apps?
Avoid dangerouslySetInnerHTML, sanitize user input, use HTTPS, Content Security Policy, protect against XSS/CSRF.
Architect 214. How to use React.Suspense with streaming server rendering (Next.js App Router)?
Use loading.js or wrap async components with <Suspense>. Next.js streams HTML as data resolves.
Architect 215. How to implement an end‑to‑end type‑safe API between React frontend and backend (tRPC)?
// Server
const appRouter = t.router({ greeting: t.procedure.input(z.object({ name: z.string() })).query(({ input }) => `Hello ${input.name}`) });
// Client
const { data } = trpc.greeting.useQuery({ name: 'World' });
Architect 216. How to build a React‑based CLI using Ink?
import React from 'react';
import { render } from 'ink';
const App = () => Hello ;
render(
Architect 217. How to implement a live coding playground like CodeSandbox with React?
Use Babel standalone for transpiling, Monaco editor, and ReactDOM to render user code into a preview iframe.
Architect 218. How to use React with WebAssembly for image processing (e.g., sharp)?
Compile sharp or similar to WASM. Load module, call from React via a worker. Use comlink for easy communication.
Architect 219. 📱 Mobile How to build a React Native app that also runs as a Flutter module in an existing app?
Not common. Could use a native shell that hosts both views via platform channels. Usually choose one framework.
Architect 220. How to implement a custom cache layer (like React Query) from scratch?
Maintain a Map of query keys. Store state (data, error, isLoading). Provide hook that subscribes to cache and triggers fetch if stale.
Architect 221. How to create a React DevTools extension for a custom React renderer?
Use react-devtools-core and implement a bridge to communicate between devtools frontend and your renderer backend.
Architect 222. How to use React.unstable_SuspenseList for coordinated loading?
(Experimental) Wraps multiple Suspense boundaries to control reveal order (e.g., revealOrder="forwards").
Architect 223. How to implement a virtual DOM diffing algorithm from scratch?
Compare two virtual trees, reorder nodes by keys, patch real DOM minimally. O(n) heuristic like React.
Architect 224. How to build a React compiler that optimizes component re‑renders (like React Forget)?
React Forget (Auto‑memoizing compiler) automatically applies equivalent of useMemo and useCallback where needed. Still experimental.
Architect 225. How to implement a user‑defined component tree serialization (e.g., for saving layout)?
Store component type and props as JSON. On load, dynamically render components using a registry map.
💼 Cross‑Platform & Business Scenarios (15)
Scenario 1: An e‑commerce app (React web + React Native) must share product catalog and cart logic. Solution: Use a shared state management library (Zustand) and a common API client. Separate UI components per platform.
Scenario 2: Build a real‑time dashboard with React and ASP.NET Core SignalR that works on web and mobile (React Native). Solution: Web uses @microsoft/signalr, React Native uses signalr.js (community). Share subscription logic via custom hook.
Scenario 3: Need to integrate a legacy PHP app with a React frontend gradually. Solution: Start by injecting React components into PHP pages using custom elements (React elements) or by replacing parts with React SPA served from a subpath.
Scenario 4: A Java Spring Boot backend serves a React admin panel; must implement role‑based menu visibility. Solution: Backend returns user roles in JWT. React decodes token, stores in context, conditionally renders sidebar links.
Scenario 5: React Native app needs to run on iOS, Android, and Web with single codebase. Solution: Use Expo with expo-router and React Native for Web. Platform‑specific files where needed.
Scenario 6: A cross‑platform chat app: React web and Flutter mobile. Solution: Use a common backend (Firebase). Flutter uses Firebase SDK, React uses JS SDK. Both listen to same Firestore collections.
Scenario 7: Implement a file upload with drag‑and‑drop in React and also capture image in React Native. Solution: Share the upload API logic. Web uses react-dropzone, Native uses react-native-image-picker.
Scenario 8: An online editor (React) must integrate with a .NET Core backend for document processing. Solution: React sends document to backend API, .NET processes, returns result. Use WebSocket for real‑time collaboration.
Scenario 9: Building a multi‑tenant CRM where each tenant can customize the React UI. Solution: Fetch tenant config (colors, layout) at startup. Use CSS variables and conditional rendering. Dynamic component loading.
Scenario 10: React web app must also work as an Electron desktop app with offline support. Solution: Wrap React with Electron. Use service worker + IndexedDB for offline. Electron provides native file access.
Scenario 11: A B2B portal uses Laravel APIs; need to render server‑side for SEO but keep React interactivity. Solution: Use Inertia.js with Laravel and React. Pages are server‑rendered, navigation is SPA‑like.
Scenario 12: Implement a progressive web app (PWA) with React that can be installed on mobile. Solution: Add a manifest.json, configure service worker with workbox-webpack-plugin. Enable "Add to Home Screen".
Scenario 13: 🤖 AI Build an AI‑powered code review assistant as a React web dashboard. Solution: Backend (Python/Node) integrates with GitHub API and OpenAI. React displays pull request diffs, AI suggestions, and allows applying fixes.
Scenario 14: Need to embed a React widget into a Flutter mobile app. Solution: Use a WebView in Flutter to host the React app. Communicate via postMessage and JavaScript channels.
Scenario 15: Migrate a large Angular app to React incrementally. Solution: Use single-spa to run both frameworks side by side. Gradually replace Angular components with React equivalents.
🧪 Hands‑on Labs (10)
Lab 1: Build a CRUD To‑Do app with React, TypeScript, and a JSON server (fake REST API).
Set up React project with Vite, create components, use useState/useEffect, fetch from json-server.
Lab 2: Implement JWT authentication flow with React and Express backend.
Express login endpoint, React login form, store token, protected route component.
Lab 3: Create a real‑time chat app with React, Node.js, and Socket.IO.
Set up Socket.IO server, React client hooks, display messages.
Lab 4: Build a reusable component library with Storybook and publish to npm.
Create components, add stories, build, publish.
Lab 5: Set up Next.js App Router with server components and a database (Prisma).
Initialize Next.js, define Prisma schema, create server component that fetches data.
Lab 6: Integrate React Native (Expo) with a Laravel API and authentication.
Expo app, Axios calls, login flow, store token securely.
Lab 7: Implement a micro‑frontend with React and Webpack Module Federation.
Create host and remote apps, configure webpack.config.js, share a component.
Lab 8: 🤖 AI Build a simple image generator UI in React that calls OpenAI DALL‑E API via backend.
Node backend proxy to OpenAI, React form, display generated image.
Lab 9: Create a custom hook for managing form state with validation (from scratch).
Implement useForm hook with values, errors, handleChange, validate.
Lab 10: Deploy a React app to Vercel with environment variables and automatic HTTPS.
Push to GitHub, connect Vercel, set env vars, auto‑deploy.
📝 Code‑Based Challenges (12)
Challenge 1: Write a custom hook that returns previous value of a state.
function usePrevious(value) {
const ref = useRef();
useEffect(() => { ref.current = value; });
return ref.current;
}
Challenge 2: Create a Higher‑Order Component that adds a loading spinner.
const withLoader = (Component) => ({ isLoading, ...props }) => isLoading ? Loading... :
Challenge 3: Implement a component that fetches data on mount and handles loading/error/success.
function DataFetcher() {
const [state, setState] = useState({ data: null, loading: true, error: null });
useEffect(() => { fetch('/api').then(res => res.json()).then(data => setState({ data, loading: false })).catch(err => setState({ error: err, loading: false })); }, []);
if (state.loading) return Loading...
;
if (state.error) return Error: {state.error.message}
;
return {JSON.stringify(state.data)};
}
Challenge 4: Write a custom hook that syncs state with localStorage.
function useLocalStorage(key, initial) {
const [storedValue, setStoredValue] = useState(() => { try { const item = window.localStorage.getItem(key); return item ? JSON.parse(item) : initial; } catch (e) { return initial; } });
const setValue = (value) => { try { setStoredValue(value); window.localStorage.setItem(key, JSON.stringify(value)); } catch (e) { console.log(e); } };
return [storedValue, setValue];
}
Challenge 5: Implement a useDebounce hook that delays value update.
function useDebounce(value, delay) {
const [debounced, setDebounced] = useState(value);
useEffect(() => { const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]);
return debounced;
}
Challenge 6: Build a simple Redux‑like store from scratch.
function createStore(reducer) {
let state;
const listeners = [];
const getState = () => state;
const dispatch = (action) => { state = reducer(state, action); listeners.forEach(l => l()); };
const subscribe = (listener) => { listeners.push(listener); return () => { listeners = listeners.filter(l => l !== listener); }; };
dispatch({});
return { getState, dispatch, subscribe };
}
Challenge 7: Create a compound component Tabs that manages active tab.
const TabsContext = createContext();
function Tabs({ children }) { const [active, setActive] = useState(0); return {children} ; }
Tabs.Tab = ({ index, children }) => { const { active, setActive } = useContext(TabsContext); return ; };
Tabs.Panel = ({ index, children }) => { const { active } = useContext(TabsContext); return active === index ? {children} : null; };
Challenge 8: 🤖 AI Implement a streaming text effect that types out AI response character by character.
const [text, setText] = useState('');
useEffect(() => { let i = 0; const interval = setInterval(() => { setText(prev => prev + fullText[i]); i++; if (i >= fullText.length) clearInterval(interval); }, 50); return () => clearInterval(interval); }, [fullText]);
Challenge 9: Write a component that uses React.lazy and Suspense with a fallback.
const LazyComp = React.lazy(() => import('./Heavy'));
function App() { return Loading...
}>Challenge 10: Create a custom useFetch hook that supports cancellation with AbortController.
function useFetch(url) {
const [data, setData] = useState(null);
useEffect(() => {
const controller = new AbortController();
fetch(url, { signal: controller.signal }).then(res => res.json()).then(setData).catch(err => { if (err.name !== 'AbortError') console.error(err); });
return () => controller.abort();
}, [url]);
return data;
}Challenge 11: Implement a context provider that counts and displays the number of times a button is clicked.
const CountContext = createContext();
function CountProvider({ children }) { const [count, setCount] = useState(0); return setCount(c => c + 1) }}>{children} ; }
function Button() { const { increment } = useContext(CountContext); return ; }
function Display() { const { count } = useContext(CountContext); return {count}; }Challenge 12: Write a function that recursively renders a tree component.
function TreeNode({ node }) {
return {node.name}{node.children && {node.children.map(child =>
} ;
}
0 Comments
thanks for your comments!