25 Popular Questions for a React Interview

Okay, imagine: you enter a Zoom call, see three faces in the camera and one black square with the inscription "Senior React Developer". Your heart is already somewhere in your heels, your hands are wet, and the only thing that spins in your head is “please, just don’t ask about reconciliation.”

Spoiler: they will ask. But after this article, you will be ready like Tony Stark before the final battle.

🔥 Basics (which for some reason everyone forgets)

1. What is the difference between Real DOM and Virtual DOM?

Difficulty: Easier than understanding why Array.sort() mutates an array

Short answer: Real DOM is what is actually displayed in the browser. Heavy, slow, like a morning awakening. Virtual DOM is a JavaScript copy, light and fast. React compares them through diffing and updates only what has changed.

What to say at the interview: "Virtual DOM allows React to batch updates and minimize expensive operations with Real DOM using the reconciliation algorithm. It's like using Git — first you commit locally, then you push all the changes at once."

2. What is JSX and why do we write HTML in JavaScript?

Difficulty: How to explain to your grandmother what a meme is

JSX is syntactic sugar over React.createElement(). Without JSX, your code would look like JSON from hell.

// With JSX (beautiful, aesthetic)
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// No JSX (welcome to 2013)
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Hello, world!')
)

3. Functional vs Class Components — do classes still make sense?

Difficulty: How to argue what is better - pizza or shawarma

Functional components with hooks have won. Classes are like dinosaurs in legacy projects. But at the interview, they may ask about componentDidMount — be prepared.

4. Explain useState — but in an interesting way

const [coffee, setCoffee] = useState('no 😭');

// A couple of lines of code...
setCoffee('Yes! ☕');

It's like a box with Schrödinger's cat, but you always know what's inside.

5. useEffect — why do you need an array of dependencies?

Difficulty: Understand why your effect is triggered 1000 times

Classic of the genre: "I have an infinite loop in useEffect, help!"

// ❌ Endless hell
useEffect(() => {
  setCount(count + 1); // Another ticket to infinity
});

// ✅ Controlled chaos
useEffect(() => {
  fetchData();
}, []); // Empty array = once during mounting

Rule: If you use a variable inside useEffect, add it to the dependencies. ESLint doesn't swear for nothing.

6. useMemo vs useCallback — what's the difference?

Complexity: How to choose between two identical T-shirts

• useMemo memorizes value (calculation result)

• useCallback memorizes function

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // we calculate once
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // the function is recreated only when the id is changed

7. useRef — not only for DOM access

It's like a pocket in a jacket where you can put anything, and it won't cause a re-render.

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // Will not cause a re-render!
});

8. Is it possible to call hooks conditionally?

NO. NEVER. FORGET IT.

// ❌ This is the way to bugs
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ Correct
const [state, setState] = useState(0);
if (condition) {
  // we use state here
}

🎭 Advanced concepts (where the pain begins)

9. What is reconciliation and how does Fiber work?

Difficulty: Explain quantum physics through memes

Reconciliation is the process of comparing the Virtual DOM. Fiber is a new implementation of this process with React 16+, which allows you to interrupt and resume work (like saving in a game).

10. Keys in lists — why is index bad?

// ❌ The interviewer shakes his head
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ The interviewer nods respectfully
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

Using the index as a key can lead to bugs when rearranging elements. React will think that these are the same elements, just with new data.

11. Context API — when to use it, and when to run to Redux?

Context for simple things (topic, language, user). If you have a complex state logic, Redux or Zustand will help you.

12. Higher-Order Components (HOC) — are they alive?

Technically yes, but their hooks are practically buried. You need to know, but you don't need to use it anymore.

// Old school, but they can ask
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Props — what is it and why?

A pattern that also almost died out with the arrival of the hooks.

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ Optimization (so that everything does not slow down)

14. React.memo — when to apply?

Component memoization. Prevents unnecessary re-renders.

const ExpensiveComponent = React.memo(({ data }) => {
  // rendered only if data has changed
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy loading and React.Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

The user is happy, the bundle is smaller, and you are a good person.

16. Code splitting — why is it important?

Nobody wants to load 5MB of JavaScript the first time they visit a site. Divide and conquer.

🔄 Data status and management

17. Controlled vs Uncontrolled components

Controlled: React controls the state of the input (via useState)
Uncontrolled: DOM manages the value itself (via ref)

// Controlled (the right way)
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Uncontrolled (for the lazy)
const inputRef = useRef();
<input ref={inputRef} />

18. Prop drilling — problem and solutions

When you throw props through 5 levels of components. Solutions: Context API, Redux, composition.

19. Lifting State Up — what is it?

Raising the state to a higher level so that several components can use it.

20. Redux vs MobX vs Zustand — which one to choose?

• Redux: if you like boilerplate and strict architecture

• MobX: if you love magic and responsiveness

• Zustand: if you like simplicity and minimalism

In 2025, Zustand wins in popularity in new projects.

🧪 Testing

21. React Testing Library vs Enzyme

Enzyme is deprecated. Use React Testing Library.

import { render, screen } from '@testing-library/react';

test('button exists', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22. What is snapshot testing?

Save a "snapshot" of the component and compare it when changes occur. It's useful, but don't overestimate it.

🚀 React 18+ and the future

23. Concurrent Rendering — what has changed?

React can interrupt rendering and resume it. No more interface freezes.

24. Automatic Batching — why do you need it?

React 18 will automatically patch all status updates, even in promises and timeouts.

25. useTransition and useDeferredValue — what are they for?

Allow to mark updates as not urgent, giving priority to more important ones.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // Does not block user input
});

🎓 Ready for the interview? And for real practice?

Learning the theory is like reading the instructions for IKEA. Real skill comes when you assemble furniture (write code) with your own hands.

That's why we created Kodik is an application where you can not just read about React, but immediately practice. Each lesson is a mini-project that can be done right in the browser. From useState to production-ready applications.

The trick is that the theory is immediately reinforced by practice. You don't need to switch between tabs, look for where to run the code, or configure the environment. Open Kodik and start coding.

And we also have Telegram channel, where useful posts are published every day: concept analysis, programming memes, current vacancies and life hacks. It's like a daily brain workout — you flip through the feed, and you pump up.

Ideal for repeating material on the subway, before bed, or during a lunch break. Programming should be convenient!

Remember: during the interview, it is important not only to know the answers, but also to be able to reason. If you don't know, say so, but show how you would look for the answer. Interviewers value honesty and the ability to learn more than knowing all the APIs by heart.

Good luck with the interview! May your components always render efficiently, and bugs be found before production 🚀