React Interview Questions: 18 Answers for Junior Developers

Most React interview questions for junior roles in Pakistan test four things: whether you understand props and state, whether you can use hooks without breaking their rules, whether you know why a component re-renders, and whether you can build a small feature live. React is worth the effort. In the Stack Overflow 2025 Developer Survey, 46.9% of professional developers said they had used it in the past year.

This page groups 18 React interview questions around the skills that junior job ads list, with short answers you can say in under a minute. Treat them as React JS interview questions for freshers and for anyone going after a first junior React developer role. By the end, you will know:

• Which topics a junior React interview covers, from the basics to the newest releases
• Model answers for 18 common questions, written in plain words you can adapt
• How to turn a vague answer into one that shows real understanding
• What a typical live coding task looks like and how to prepare for it
• What Pakistani job ads list as must-have React skills

What Do Interviewers Check in a Junior React Interview?

Interviewers rarely want trivia. They want proof that you can join a team and fix a bug without breaking three other screens. So good React interview questions climb in steps. They start with plain JavaScript, move to components and props, then hooks, then rendering and performance. A few end with a question on recent React changes to see if you keep up.

If you get stuck on the lower steps, the upper ones won't matter. A candidate who can't explain array methods like map and filter will struggle to explain how a list renders. So revise ES6+ JavaScript first: destructuring, spread, arrow functions, promises and async/await.

React Interview Questions at a Glance

Use this table to plan your revision. Spend most of your time on the middle rows, because that's where junior candidates lose marks.

Fundamentals: Questions 1 to 5

1. What Is JSX, and Why Does React Use It?

JSX is a syntax that lets you write markup inside JavaScript. A build tool turns it into plain function calls. React uses it because the markup and the logic that controls it usually change together, so keeping them in one place makes components easier to read. Mention that JSX needs one parent element, and that you write className instead of class.

2. What Is the Difference Between Props and State?

Props are inputs a parent passes down. The child reads them but shouldn't change them. State is data a component owns and updates itself, and changing it makes React render that component again. A good one-line summary: props are like function arguments, state is like a component's memory. If you also mention refs, you'll stand out. A ref keeps a value between renders, but the useRef reference is clear that changing it does not trigger a re-render.

3. What Happens When State Changes?

React calls your component function again with the new state, compares the new output with the previous one, and updates only the parts of the page that changed. Avoid saying "React re-renders the whole page." It doesn't. Only that component and its children run again.

4. Why Do List Items Need a Key?

A key tells React which item is which between renders. The React docs on rendering lists say keys must be unique among siblings and must not change. Use a stable ID from your data, such as a database ID. Don't use the array index when items can be added, removed or reordered, and never use Math.random(), because React would then rebuild every item on each render and lose anything the user typed.

5. What Is the Difference Between a Controlled and an Uncontrolled Input?

In a controlled input, React state holds the value and an onChange handler updates it. In an uncontrolled input, the browser holds the value and you read it with a ref when you need it. Controlled inputs make validation and instant feedback easy, which is why most form tasks in interviews expect them.

React Hooks Interview Questions: 6 to 10

Plan extra revision time here. Hooks sit in the middle of most React interview questions because nearly every modern component uses them.

6. What Are the Rules of Hooks?

There are two. First, call hooks only at the top level of a component or a custom hook, never inside loops, conditions or nested functions. Second, call them only from React function components or custom hooks, not from ordinary JavaScript functions. The official Rules of Hooks page also lists event handlers, class components and try/catch blocks as places where hooks aren't allowed. React relies on hooks being called in the same order every time, which is why these rules exist.

7. Why Doesn't the State Update Right After I Call setCount?

Calling a setter asks React for a new render. It doesn't change the variable in the code that's already running. So logging count on the next line still shows the old value. If the next value depends on the previous one, pass a function instead:

setCount(c => c + 1);

Interviewers like this question because the answer shows whether you have debugged real React code.

8. When Should You Use useEffect?

Use it to sync a component with something outside React: a network request, a browser API, a timer or a third-party widget. The React team's guide You Might Not Need an Effect gives two cases where an Effect is the wrong tool. If a value can be calculated from props or state, calculate it during render. If code runs because the user clicked something, put it in the event handler. Saying this out loud tells the interviewer you've read the docs, not just a tutorial.

9. What Do useMemo and useCallback Do, and Do You Still Need Them?

useMemo caches a calculated value. useCallback caches a function, so a child receiving it as a prop doesn't see a "new" function on every render. Then add the current picture. React Compiler 1.0, released in October 2025, memoizes components and hooks automatically at build time. The React team now recommends relying on the compiler in new code and keeping these hooks as an escape hatch, for example when a memoized value is an Effect dependency.

10. What Is a Custom Hook?

A custom hook is a function whose name starts with use and which calls other hooks. It lets two components share stateful logic, such as reading the window width or fetching data, without copying code. Each component that calls it gets its own separate state. Have one ready to describe, such as a useFetch hook from your own project.

Rendering and Performance: Questions 11 to 13

11. Why Does My Effect Run Twice in Development?

That's Strict Mode at work. According to the StrictMode reference, in development React renders components twice and runs each Effect through an extra setup, cleanup and setup cycle. This exposes missing cleanup code, such as a chat connection that is never closed. None of it happens in a production build. The right fix is to write a proper cleanup function, not to remove Strict Mode.

12. What Causes a Component to Re-render?

Three things: its own state changes, its parent re-renders, or a context it reads changes. A good answer also covers what to do about slow renders. Move state down closer to where it's used, split large components, and measure with React DevTools before you add memoization anywhere.

13. How Do You Make a Large React App Load Faster?

Split the code so users download only what the current page needs. Lazy loading lets React download a component only when it's first shown. Also mention smaller images, paginated API calls and avoiding huge libraries for small jobs. Interviewers like candidates who say "I'd measure first" before naming fixes.

Data, Forms and Routing: Questions 14 to 16

14. How Do You Fetch Data in a Component?

For a simple app, fetch inside an Effect, keep loading and error states, and add cleanup so a slow, older response can't overwrite a newer one. The React docs show an ignore flag for this. For larger apps, say you'd use the data fetching built into a framework or a dedicated data-fetching library, because those handle caching and repeated requests for you.

15. How Do You Pass Data Between Sibling Components?

Lift the shared state up to their closest common parent and pass it down as props. If many distant components need the same data, such as the logged-in user or the cart, use Context or a state library like Redux Toolkit. Explain that you'd start simple and add a library only when prop passing becomes painful.

16. How Does Client-Side Routing Work?

A router library such as React Router shows a different component for each URL without reloading the page. It updates the browser history, so the back button still works. Be ready to explain route parameters, like /products/:id, and how you'd protect a page that needs a login.

Modern React: Questions 17 and 18

17. How Would You Start a New React Project Today?

Not with Create React App. The React team deprecated it for new apps in February 2025 and pointed developers to a framework, or to a build tool such as Vite, Parcel or RSBuild. A safe interview answer: "For a learning project or a dashboard, Vite. For a site that needs server rendering and good SEO, a framework like Next.js."

18. What Changed in Recent React Versions?

Check the React versions page the week before your interview. As of October 2026, the latest release is React 19.3, published on September 9, 2026. Its release post marks the <ViewTransition> component and Fragment Refs as stable. You don't need every detail. Name one or two features, say what they're for, and say plainly if you haven't used them in a project yet.

How Should You Structure a Spoken Answer?

Many students know the right idea but say it badly. They give a one-word definition, or they talk for three minutes without a point. A simple pattern fixes both problems, and it works for any of the React interview questions on this page:

1. Define it in one sentence.
2. Give a small example from code you have written.
3. Name one trap or limit you know about.

That takes about 40 seconds, and the trap is what convinces the interviewer you've used the feature for real. Practise this pattern with the English interview questions guide if speaking confidently in English is your weaker area. The graphic below applies the pattern to a typical useEffect interview question.

What Happens in the Live Coding Round?

Expect a practical round after the spoken React interview questions, either on your own laptop or in an online editor. Prepare for small, complete features like these:

• A to-do list with add, delete and a "completed" filter
• A search box that filters a list of products as you type
• A page that fetches users from a public API and shows loading and error states
• A simple form with validation messages under each field

Talk while you code. Say which state you need before you write it. If you get stuck, explain what you'd check next. Interviewers often care more about how you reason than about finishing every feature.

What Do React Job Ads in Pakistan Ask For?

Job ads give you the clearest revision list, so read a few before you apply for React developer jobs in Pakistan. Take one example: a Junior React JS Developer listing on Rozee.pk, posted in September 2026 by a Karachi company with 11 to 50 staff. It asked for ES6+ JavaScript, React components, props, state and hooks, HTML5 and CSS3, REST APIs and JSON, and Git with GitHub. Next.js, basic Node.js, Tailwind CSS or Material UI, and a GitHub portfolio were listed as pluses. The advertised salary was Rs. 30,000 to Rs. 55,000 per month, depending on skills.

That is one ad, not a market average, but its skill list lines up closely with the React interview questions above. If you're still building the basics, follow the frontend developer roadmap for Pakistan first, then return to these questions. Applying for data roles too? The SQL interview questions for freshers follow a similar format.

Preparing for React Interviews at PSTA

PSTA's Advanced React.js Mastery course is a 12-week program with a listed fee of Rs. 30,000 at the time of writing. Its eight modules cover advanced hooks and custom hooks, Context API and Redux Toolkit, React Router, API integration, performance and code splitting, testing and debugging, authentication, and a final scalable e-commerce project. The course page says it is designed to help you handle technical interviews and large codebases, which is the same ground the React interview questions on this page cover.

You can join on campus in Abbottabad, live online from anywhere in Pakistan, or a mix of both. If your JavaScript needs work first, the JavaScript course (beginner to React) is the better starting point. For backend and deployment as well, see Full-Stack Web Development with AI. You can compare everything on the courses page.

Answer Three Questions Out Loud Tonight

Pick three React interview questions from this list: numbers 2, 7 and 8. Answer each one aloud using the define, example, trap pattern, and record yourself on your phone. Listen back once. You'll hear exactly where your explanation goes vague, and that's the part to fix before any real interview.

When you're ready for guided practice on real projects, check the admission page for the next batch, or send a WhatsApp message to +92 314 5424399 to ask about timings.