Skip to content
Java Full Stack with React
All coursesPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

React Frontend Developer Interview Questions & Answers

40 questions for React Frontend Developer interviews — 24 easy, 15 medium, 1 hard.

About the React Frontend Developer role

A React developer builds the user interface of web applications. The role involves turning designs into reusable components, managing state, calling REST APIs, handling forms and validation, and keeping pages fast and accessible on all devices. Java full stack learners who enjoy UI work often start here and later move across the stack, because understanding the backend makes API integration easier.

React and hooks JavaScript ES2015+ Responsive CSS API integration Web performance
Solved for this roleStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
01

Explain the CSS box model.

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
Every element is a box made of content, padding, border and margin, from inside to outside. By default, width applies only to the content, so padding and border add to the final size. Setting box-sizing: border-box makes width include padding and border, which makes layouts predictable, and most projects apply it to all elements. Vertical margins between block elements can collapse into one margin.
02

Build a login form with basic validation in React.

React FrontendMedium
Save to ▾
Show answer
function LoginForm({ onLogin }) { const [form, setForm] = useState({ email: '', password: '' }); const [errors, setErrors] = useState({}); const handleChange = e => setForm({ ...form, [e.target.name]: e.target.value }); const handleSubmit = e => { e.preventDefault(); const errs = {}; if (!/^\S+@\S+\.\S+$/.test(form.email)) errs.email = 'Enter a valid email'; if (form.password.length < 8) errs.password = 'Minimum 8 characters'; setErrors(errs); if (Object.keys(errs).length === 0) onLogin(form); }; return ( <form onSubmit={handleSubmit}> <input name="email" value={form.email} onChange={handleChange} /> {errors.email && <span>{errors.email}</span>} <input name="password" type="password" value={form.password} onChange={handleChange} /> {errors.password && <span>{errors.password}</span>} <button type="submit">Login</button> </form> ); }
03

Use map, filter and reduce to get the total value of in-stock products.

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
const products = [ { name: 'Pen', price: 20, qty: 10, inStock: true }, { name: 'Bag', price: 900, qty: 0, inStock: false }, { name: 'Book', price: 250, qty: 4, inStock: true }, ]; const total = products .filter(p => p.inStock) .map(p => p.price * p.qty) .reduce((sum, value) => sum + value, 0); console.log(total); // 1200
04

What is the biggest full stack project you have built?

React FrontendMedium
Save to ▾
Show answer
I built a job portal using React with Vite, Spring Boot 3, Spring Security with JWT and MySQL. Recruiters could post jobs and candidates could apply and track status. I designed the REST APIs, implemented role-based access, added pagination and search, and used TanStack Query on the frontend. I deployed it with Docker and a CI pipeline. The hardest part was file upload for resumes, which I solved with pre-signed object storage URLs.
05

You need H2 for local development, MySQL for testing and PostgreSQL in production. How do you configure this?

Spring BootEasy
Save to ▾
Show answer
Create application-dev.yml, application-test.yml and application-prod.yml, each with its own spring.datasource URL, username and driver. Keep shared settings in application.yml. Activate the right one with SPRING_PROFILES_ACTIVE in each environment. Read production credentials from environment variables, for example url: ${DB_URL}, instead of hard-coding them. For realistic integration tests, Testcontainers can start the same database engine used in production.
06

How do code splitting and lazy loading work in React?

React FrontendMedium
Save to ▾
Show answer
Code splitting breaks the JavaScript bundle into smaller chunks loaded on demand, which improves first load time. React.lazy with a dynamic import, such as const Reports = lazy(() => import('./Reports')), loads the component only when it renders, and Suspense shows a fallback while it loads. Splitting by route is the most common pattern. Bundlers like Vite create the chunks automatically from dynamic imports.
07

What is React and what is the virtual DOM?

React FrontendEasy
Save to ▾
Show answer
React is a JavaScript library for building user interfaces from reusable components. Components describe what the UI should look like for a given state, and React updates the browser DOM when the state changes. The virtual DOM is a lightweight in-memory tree of the UI. On each update, React compares the new tree with the previous one and applies only the minimum real DOM changes, which keeps updates efficient and the code declarative.
08

Why should we hire you as a Java full stack developer?

JavaScript, HTML and CSSMedium
Save to ▾
Show answer
I can contribute on both sides of a feature: I have built REST APIs with Spring Boot, JPA and MySQL, and responsive React screens that consume them. I write tests, use Git properly and have deployed my projects with Docker. I also learn quickly; I picked up Spring Security and JWT for my capstone in two weeks. I am looking for a team where I can grow into an engineer who owns features from design to production.
09

A report job builds a large string with + inside a loop and is very slow. What do you change?

Core JavaEasy
Save to ▾
Show answer
Each + inside a loop creates a new String and copies the old content, giving roughly O(n squared) work. Replace it with one StringBuilder created before the loop, optionally with an initial capacity, and call append inside the loop. For joining collections, use String.join or Collectors.joining. For very large output, write directly to a BufferedWriter or stream instead of holding everything in memory.
10

Why are semantic HTML and accessibility important?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
Semantic elements like header, nav, main, article, button and label describe meaning, so screen readers, search engines and browsers understand the page. Use a real button instead of a clickable div so keyboard and focus work automatically. Add alt text to images, link labels to inputs, keep heading order logical and ensure enough colour contrast. Accessibility follows WCAG guidelines and improves SEO and usability for everyone.
11

What is the difference between persist and merge, and between save and saveAndFlush?

JPA and HibernateMedium
Save to ▾
Show answer
persist makes a new entity managed and assigns its ID; it fails for detached entities. merge copies the state of a detached entity onto a managed copy and returns that copy. Spring Data save calls persist for new entities and merge otherwise. saveAndFlush also calls flush, pushing pending SQL to the database immediately, which helps when you need a constraint error or trigger result now. The commit still happens at the end of the transaction.
12

What is the difference between == and === in JavaScript?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
== compares after type coercion, so 0 == '0' and null == undefined are true, which leads to surprising results. === compares both type and value without coercion, so 0 === '0' is false. Always use === and !== in application code. The only common exception is value == null, which checks for both null and undefined in one expression.
13

Why does React need a key prop when rendering lists?

React FrontendEasy
Save to ▾
Show answer
Keys help React match list items between renders, so it knows which items were added, removed or moved. Use a stable unique ID from the data, such as product.id. Using the array index as key causes bugs when items are reordered or deleted, because state and input values can attach to the wrong row. Keys only need to be unique among siblings, and they are not passed to the component as a prop.
14

What is event delegation and why is it useful?

JavaScript, HTML and CSSMedium
Save to ▾
Show answer
Events bubble up from the target element to its ancestors. With event delegation you attach one listener to a parent, such as a ul, and use event.target.closest('li') to find which child was clicked. This saves memory compared with a listener on every item and automatically works for items added later. It is commonly used for dynamic tables and lists. React uses a similar idea by attaching listeners at the root.
15

Your component keeps re-rendering in an infinite loop after calling an API. What is wrong?

React FrontendMedium
Save to ▾
Show answer
Usually useEffect sets state and has a dependency that changes on every render, or has no dependency array at all. A common case is an object or function created inside the component and listed as a dependency, so it is new each time. Fix it by using a correct dependency array, moving the object outside the component, or memoizing it with useMemo or useCallback. Also check that you are not calling setState directly during render.
16

Implement a cart counter using useReducer.

React FrontendEasy
Save to ▾
Show answer
function cartReducer(state, action) { switch (action.type) { case 'add': return { count: state.count + 1 }; case 'remove': return { count: Math.max(0, state.count - 1) }; case 'reset': return { count: 0 }; default: throw new Error('Unknown action ' + action.type); } } function Cart() { const [state, dispatch] = useReducer(cartReducer, { count: 0 }); return ( <div> <span>Items: {state.count}</span> <button onClick={() => dispatch({ type: 'add' })}>+</button> <button onClick={() => dispatch({ type: 'remove' })}>-</button> </div> ); }
17

Why is String immutable in Java?

Core JavaEasy
Save to ▾
Show answer
Once created, a String object cannot change. This allows the String pool to safely share literals, makes strings thread-safe without locking, lets hashCode be cached for fast HashMap keys, and protects security-sensitive values like file paths, class names and URLs from being changed after validation. Any operation such as concat or replace returns a new String, which is why heavy modification should use StringBuilder.
18

Which HTTP methods are safe and which are idempotent?

REST APIs, Security and MicroservicesEasy
Save to ▾
Show answer
Safe methods do not change server state: GET, HEAD and OPTIONS. Idempotent methods give the same result if repeated: GET, PUT, DELETE, HEAD and OPTIONS. POST is neither, so retrying a POST can create duplicate orders, which is why payment APIs use an idempotency key header. PATCH is not guaranteed idempotent. Knowing this matters for retries in clients, gateways and message consumers.
19

What is the difference between checked and unchecked exceptions?

Core JavaEasy
Save to ▾
Show answer
Checked exceptions extend Exception (but not RuntimeException) and must be caught or declared with throws, for example IOException or SQLException. Unchecked exceptions extend RuntimeException, such as NullPointerException or IllegalArgumentException, and the compiler does not force handling. Use checked exceptions for recoverable conditions the caller should handle, and unchecked ones for programming errors. Spring prefers unchecked exceptions, for example DataAccessException, to keep service code clean.
20

After calling setCount(count + 1), console.log(count) still shows the old value. Why?

React FrontendMedium
Save to ▾
Show answer
State updates are scheduled, not applied immediately. The count variable in the current render is a constant snapshot, so logging right after setState shows the old value; the new value appears in the next render. React also batches multiple updates. When the next state depends on the previous one, use the updater form setCount(c => c + 1), which works correctly even when called several times. Use useEffect to react to the updated value.
21

Write a query to find the second highest salary from an employees table.

SQL and DatabasesEasy
Save to ▾
Show answer
-- Using a subquery SELECT MAX(salary) AS second_highest FROM employees WHERE salary < (SELECT MAX(salary) FROM employees); -- Using DISTINCT with OFFSET SELECT DISTINCT salary FROM employees ORDER BY salary DESC LIMIT 1 OFFSET 1; -- The first query returns NULL when there is no second salary.
22

When would you use Flexbox and when CSS Grid?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
Flexbox is one-dimensional: it arranges items in a row or a column and is great for navbars, button groups, centring and card rows that wrap. Grid is two-dimensional: it controls rows and columns together, ideal for page layouts, dashboards and galleries with grid-template-areas. They work well together, for example a Grid page layout with Flexbox inside each card. Both reduce the need for floats and positioning hacks.
23

What is the difference between localStorage, sessionStorage and cookies?

JavaScript, HTML and CSSMedium
Save to ▾
Show answer
localStorage keeps data with no expiry for the origin, around 5 to 10 MB, and is shared across tabs. sessionStorage is similar but cleared when the tab closes and is per tab. Cookies are small, around 4 KB, are sent automatically with every request to the server and can be marked HttpOnly, Secure and SameSite. Use cookies for auth sessions, and storage for non-sensitive UI preferences only, since scripts can read storage.
24

What is the difference between props and state?

React FrontendEasy
Save to ▾
Show answer
Props are inputs passed from a parent component and are read-only inside the child. State is data owned by a component that can change over time, managed with useState or useReducer, and changing it triggers a re-render. For example, a ProductCard receives a product as props, while a cart counter keeps its quantity in state. When two components need the same state, lift it up to their common parent.
25

When would you use the Context API and when a state library like Redux Toolkit or Zustand?

React FrontendMedium
Save to ▾
Show answer
Context is good for passing low-frequency global values such as theme, language or the logged-in user without prop drilling. Every consumer re-renders when the context value changes, so it is not ideal for fast-changing data. Redux Toolkit or Zustand suit larger shared client state with many updates, selectors and dev tools. Server data like API responses is often best handled by TanStack Query, which adds caching and refetching.
26

What is the difference between Comparable and Comparator?

Collections and StreamsEasy
Save to ▾
Show answer
Comparable defines a class's natural ordering through compareTo, implemented inside the class itself, such as String or Integer. Comparator is a separate object with compare, so you can define many orderings without changing the class. Since Java 8, Comparator.comparing, thenComparing and reversed make multi-field sorting concise. Use Comparable for one obvious order and Comparator for business-specific sorting like price then rating.
27

Explain the JavaScript event loop, including microtasks and macrotasks.

JavaScript, HTML and CSSHard
Save to ▾
Show answer
JavaScript runs on a single thread with a call stack. Asynchronous work is handled by the browser or Node, and callbacks wait in queues. After the stack empties, the event loop runs all microtasks first, such as promise callbacks and queueMicrotask, then one macrotask, such as setTimeout or an I/O callback, then renders if needed. So Promise.resolve().then(a) runs before setTimeout(b, 0). Long synchronous code blocks everything, including UI updates.
28

What is the difference between var, let and const?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
var is function-scoped, hoisted and initialised as undefined, and can be redeclared, which causes bugs in loops and blocks. let and const are block-scoped and stay in the temporal dead zone until declared, so using them early throws an error. let allows reassignment and const does not, although a const object or array can still be mutated. Use const by default, let when reassignment is needed and avoid var.
29

You are passing the same user prop through five levels of components. What would you do?

React FrontendEasy
Save to ▾
Show answer
This is prop drilling, which makes intermediate components depend on data they do not use. For global, rarely changing data like the logged-in user or theme, create a context with a provider at the top and read it with useContext through a custom hook such as useAuth. Alternatively, use component composition, passing ready-made elements as children. For complex shared state, a store like Zustand or Redux Toolkit is suitable.
30

How do you take feedback from a senior on your React code?

React FrontendEasy
Save to ▾
Show answer
Situation: in my first month, a senior reviewer left many comments about large components and duplicated fetch logic. Task: improve the code and learn from it. Action: I thanked him, asked for a short call to understand the reasoning, split the component, and wrote a custom hook for data fetching. Result: the pull request was approved, and the hook was reused in three other screens. I now self-review using his checklist.
31

Users must upload files up to 200 MB. How do you design the upload API?

REST APIs, Security and MicroservicesMedium
Save to ▾
Show answer
Avoid streaming large files through the application server. Generate a pre-signed URL for object storage like S3 or Azure Blob so the browser uploads directly, then the client calls the API to confirm and save the metadata. If uploads must go through Spring, raise spring.servlet.multipart.max-file-size, stream the input to storage instead of loading it into memory, validate type and size, and scan files for malware before use.
32

How do you handle a Git merge conflict when working in a team?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
Situation: two of us edited the same service class in parallel branches. Task: merge without losing either change. Action: I pulled the latest main, rebased my branch, opened the conflicted files and resolved them together with my teammate on a quick call, then ran all tests before pushing. Result: the merge was clean. To reduce conflicts, we now keep branches short-lived and pull from main daily.
33

What is the difference between JPA, Hibernate and Spring Data JPA?

JPA and HibernateEasy
Save to ▾
Show answer
JPA, now Jakarta Persistence, is a specification that defines annotations and the EntityManager API for object-relational mapping. Hibernate is the most widely used implementation of that specification and adds extra features. Spring Data JPA is a layer above JPA that generates repository implementations from interfaces, so methods like findByEmail are created automatically. In a Spring Boot app you write against Spring Data, which uses JPA, which is implemented by Hibernate.
34

When should you use useMemo and useCallback?

React FrontendMedium
Save to ▾
Show answer
useMemo caches the result of an expensive calculation until its dependencies change, such as filtering and sorting a big list. useCallback caches a function reference, which matters when passing callbacks to children wrapped in React.memo or used in effect dependencies. Do not wrap everything, because memoization itself has a cost. The React Compiler, released as stable in 2025, can add much of this memoization automatically in supported projects.
35

What is hoisting in JavaScript?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
During compilation, declarations are moved to the top of their scope. Function declarations are hoisted fully, so they can be called before they appear. var declarations are hoisted and initialised to undefined. let, const and class declarations are hoisted but stay uninitialised in the temporal dead zone, so accessing them early throws a ReferenceError. Function expressions assigned to variables follow the variable's rules.
36

The layout looks fine on desktop but breaks on mobile with horizontal scrolling. How do you debug it?

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
Check that the page has the viewport meta tag. Use browser device mode to find the element wider than the screen, often fixed widths in pixels, large images, long words or tables. Replace fixed widths with max-width: 100 percent, flexible units and flex-wrap, add overflow-wrap for long text and wrap wide tables in a scrollable container. Build mobile-first with media queries that add complexity for larger screens.
37

Compare promises and async/await.

JavaScript, HTML and CSSMedium
Save to ▾
Show answer
A promise represents a value that will be available later, handled with then, catch and finally. async/await is syntax built on promises: an async function always returns a promise, and await pauses that function until the promise settles, so asynchronous code reads like synchronous code. Errors are handled with try/catch. Awaiting calls one by one is sequential, so use Promise.all for independent calls to run them in parallel.
38

Fetch a list of products from an API and show loading and error states.

React FrontendMedium
Save to ▾
Show answer
function ProductList() { const [products, setProducts] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const controller = new AbortController(); fetch('/api/products', { signal: controller.signal }) .then(res => { if (!res.ok) throw new Error('HTTP ' + res.status); return res.json(); }) .then(data => setProducts(data.content)) .catch(err => { if (err.name !== 'AbortError') setError(err.message); }) .finally(() => setLoading(false)); return () => controller.abort(); }, []); if (loading) return <p>Loading...</p>; if (error) return <p>Error: {error}</p>; return <ul>{products.map(p => <li key={p.id}>{p.name}</li>)}</ul>; }
39

What is a closure in JavaScript? Give a practical use.

JavaScript, HTML and CSSMedium
Save to ▾
Show answer
A closure is a function that remembers variables from the scope where it was created, even after that outer function has returned. For example, function counter() { let n = 0; return () => ++n; } returns a function that keeps its own private n. Closures are used for data privacy, function factories, event handlers, debounce and memoization, and React hooks rely on them. Stale closures in effects are a common bug when dependencies are missing.
40

Centre a div horizontally and vertically using CSS.

JavaScript, HTML and CSSEasy
Save to ▾
Show answer
.container { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ min-height: 100vh; } /* Grid alternative */ .container { display: grid; place-items: center; min-height: 100vh; }

Frequently asked questions

What does a React Frontend Developer do?

A React developer builds the user interface of web applications. The role involves turning designs into reusable components, managing state, calling REST APIs, handling forms and validation, and keeping pages fast and accessible on all devices. Java full stack learners who enjoy UI work often start here and later move across the stack, because understanding the backend makes API integration easier.

Which skills are tested in a React Frontend Developer interview?

Expect questions on React and hooks, JavaScript ES2015+, Responsive CSS, API integration, Web performance. Most rounds also ask you to explain a project and solve one practical problem live.

How do I prepare for a React Frontend Developer interview?

Revise React Frontend, JavaScript, HTML and CSS first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.

Topic sheets for this role

React Frontend questionsJavaScript, HTML and CSS questions

Other roles

Java Full Stack DeveloperSpring Boot Backend DeveloperSoftware Engineer (Java)Senior Java Full Stack EngineerJava Technical Lead

More ways to practise

Company-wise Java Full Stack with React questionsExperience-wise Java Full Stack with React questionsRole-wise Java Full Stack with React questionsCity-wise Java Full Stack with React questionsMost asked Java Full Stack with React questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsJava Full Stack with React mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsJava Full Stack with React topic sheets