React Interview Questions and Answers for Freshers and Juniors

We hire full stack developers at Creuto who use React every day. In interviews, clear explanations of how React works beat long lists of memorised facts. Here are the questions to practise.

Components and rendering

1. What is JSX?

A syntax that lets you write UI as HTML-like code in JavaScript. It compiles to function calls that create React elements.

2. What triggers a re-render?

A change in a component's state, a change in its props from a parent re-render, or a change in a context it uses.

3. Why do lists need keys?

Keys let React match items between renders. Stable, unique keys keep the right state with the right item; array indexes cause bugs when items move.

4. What is the virtual DOM?

A lightweight description of the UI. React compares the new description with the previous one and updates only what changed in the real DOM.

Hooks

5. Explain useState and useEffect.

useState stores a value that triggers a re-render when it changes. useEffect runs side effects after render, such as fetching data or subscribing to events, and can clean up when the component unmounts.

6. What are the rules of hooks?

Call hooks at the top level of a component or custom hook, never inside loops, conditions or nested functions, so React can keep their order.

7. When would you use useRef?

To hold a mutable value that does not trigger a re-render, or to access a DOM element directly, such as focusing an input.

8. What are useMemo and useCallback for?

Caching a computed value or a function between renders, mainly to avoid expensive recalculations or unnecessary child re-renders.

9. What is a custom hook?

A function starting with "use" that combines hooks into reusable logic, such as useFetch or useDebounce.

State and data

10. What is lifting state up?

Moving shared state to the nearest common parent so sibling components stay in sync.

11. When would you use context?

For values many components need, such as theme, language or the logged-in user. For frequently changing data, a state library is often a better fit.

12. How do you fetch data in React?

In an effect with proper loading and error states, or, more commonly now, with a library such as TanStack Query or the data features of a framework like Next.js.

Forms

13. Controlled vs uncontrolled inputs?

Controlled inputs keep their value in React state. Uncontrolled inputs keep it in the DOM and are read with a ref. Form libraries often mix both for performance.

Performance

14. How do you improve a slow React page?

Measure with the React DevTools profiler, avoid unnecessary re-renders, split code with lazy loading, virtualise long lists and keep heavy work out of render.

Testing

15. How do you test React components?

With a test runner such as Jest or Vitest and React Testing Library, testing what the user sees and does rather than internal implementation details.

How to prepare

• Revise from the official React documentation, which teaches modern React with hooks.
• Build and deploy a small app with routing, a form and data from an API.
• Practise explaining your code out loud.
• For full stack roles, also revise Node.js interview questions.

Working at Creuto

At Creuto we build web apps with React, Next.js and Node.js and hire remotely across India. See the full stack developer role, the software development internship and all open roles.