React Interview Buzzwords: A Letter to My Past Self (and Maybe Yours Too)

This one time in an interview, I confused the Virtual DOM (Document Object Model) with Data Object Modification.

I could tell I’d made that blunder the moment the words left my mouth. My brain went, “Well, that’s not right,” and the interviewer just nodded politely. Thankfully, they weren’t harsh — and honestly, many tech interviewers aren’t. They’re usually more interested in how you think through a problem, not whether you’ve memorized textbook definitions.

At least I got the Object part right, lol.

Still… I wish I’d known what to expect.

If you're anything like me — self-taught, bootcamp-trained, or even someone who’s been building things in React but hasn’t faced many interviews — you’ve probably had this same question:

“Where do I even start preparing for a React interview?”

This article is both my answer and my preparation journal. A guide I wish I had before walking into that interview. A collection of buzzwords I’ve heard in interviews, tech talks, webinars, and mock interview prep sessions.

And yes — everyone keeps saying this, and it’s true:

Reading the official React Docs is interview prep 101.
Don’t skip it.

So here we go — buzzwords, broken down.

---

Buzzwords and What They Actually Mean

1. Virtual DOM

The Virtual DOM (Document Object Model) is like a lightweight copy of the actual DOM. React uses it to figure out what changed and updates only that part of the real DOM — for performance.

Interview angle:
They might ask, ‘What is the Virtual DOM, and why is it important in React?’ or quiz you indirectly via performance-related questions.

Tip: Practice explaining how React decides what to update and why that's efficient.

How React decides what to update (and why it's efficient):

1. Creates a new virtual DOM tree based on the updated state.

2. Compares it with the previous virtual DOM

3. Finds the differences (or “diffs”) between the old and new trees.

4. Updates only the changed parts of the actual DOM — not the entire page.

This makes React efficient because:

• DOM updates are slow and costly for the browser, but virtual DOM comparisons are fast.

• By batching and minimizing updates, React keeps your app snappy and responsive.

Bonus analogy:
Think of React as a smart editor. Instead of retyping the whole document, it just highlights and rewrites the changed words.

---

2. JSX

JSX is a syntax extension that lets you write HTML-like code in JavaScript files. It looks like HTML, but it’s not.

Interview angle:

“What is JSX? Can React work without it?”

Tip:
JSX doesn’t add new functionality to React — it just makes your code more readable. Under the hood, JSX is transformed into React.createElement() calls. For example:

const element = <h1>Hello, world!</h1>;

becomes:

const element = React.createElement('h1', null, 'Hello, world!');

So yes, React works without JSX — it’s just less convenient. JSX is a friendlier way to describe UI in code, not a separate language or required feature.

---

3. Hooks

Hooks are special functions in React that let you use state and lifecycle behavior inside functional components — without needing class components.

Why were hooks introduced?
Before Hooks, if you wanted to manage state or use lifecycle methods (componentDidMount, etc.), you had to write class components — which were more complex and harder to reuse logic across components.

Hooks solved that by:

• Making code simpler and easier to share

• Enabling logic reuse through custom hooks

• Letting all components be written as functions

Common Hooks:

• useState – Add local state

• useEffect – Run side effects

• useRef – Reference a DOM element or persist a value across renders

• useMemo – Cache expensive values

• useCallback – Cache functions to avoid unnecessary re-renders

useMemo vs. useCallback?

• useMemo(fn, deps) → Caches a value returned by fn

• useCallback(fn, deps) → Caches the function itself

Both help with performance optimization — especially in large or deeply nested components.

Interview angle:
“Why were hooks introduced? What’s the difference between useMemo and useCallback?”

Tip: Learn by building a small custom hook. It’s the best way to understand the ‘why.’

---

4. useState

useState is a Hook that lets functional components hold and update state (aka memory). Before Hooks, only class components could do this.

Syntax:

const [count, setCount] = useState(0);

• count: current state value

• setCount: function to update it

• 0: initial value

Every time setCount is called, React re-renders the component with the new value.

Example use cases:

• Toggling a modal:

    const [isOpen, setIsOpen] = useState(false);
    setIsOpen(prev => !prev); // toggles between true/false
  

• Tracking input fields, dark mode, score, etc.

Why it matters:
State changes trigger automatic UI updates — no need to touch the DOM manually. React does it for you.

Interview angle:
Expect practical questions — “How would you toggle a boolean with useState?”

Tip: Understand how updating state re-renders a component and triggers changes in the UI.

---

5. useEffect

useEffect is a React Hook that lets your component do things after it renders — like fetching data, listening to events, or starting a timer. These are called side effects because they affect things outside the component.

Example:

useEffect(() => {
  fetchData();
}, []);

• Runs after the component is shown on the screen.

• [] means “only run this once” — like componentDidMount.

Dependency Array — What’s that?

The second argument (the square brackets) controls when the effect runs:

• []: Run once.

• [value]: Run when value changes.

• Omit it: Runs after every render (usually not ideal).

Cleanup:

Some effects need to clean up after themselves — like stopping a timer or unsubscribing.

useEffect(() => {
  const id = setInterval(() => console.log('tick'), 1000);
  return () => clearInterval(id);
}, []);

That return function runs when the component is removed or re-runs the effect — preventing bugs or memory leaks.

Tip:
Be ready to explain what triggers the effect, and why cleanup helps keep your app smooth and bug-free.

---

6. Props vs State

At the heart of React components are two ways to handle data: props and state. They both store data, but they do it differently and for different reasons.

Props (short for “properties”)

Props are like arguments you pass into a function. They come from outside the component — usually from a parent component — and they are read-only. You can't change them inside the component that receives them.

Think of props like a lunchbox your parent hands you every morning. You didn’t pack it yourself, and you’re not supposed to change what’s inside — you just eat what you're given.

Example:
Let’s say we have a Button component that needs to display a label:

function Button(props) {
  return <button>{props.label}</button>;
}

// Usage
<Button label="Submit" />

Here, "Submit" is passed as a prop. The Button just displays whatever label it receives — it doesn't care where it came from or why.

---

State

State is internal to a component. It’s like the component’s brain — it remembers things and can change over time, often in response to user input or other events. Unlike props, state can be updated using React’s useState() hook (in function components).

Think of state like your own mood. No one hands it to you — you feel it yourself, and it can change depending on what happens during the day.

Example:
Say you’re building a simple form with an input field that updates as the user types:

function Form() {
  const [inputValue, setInputValue] = useState('');

  function handleChange(event) {
    setInputValue(event.target.value);
  }

  return (
    <input
      type="text"
      value={inputValue}
      onChange={handleChange}
    />
  );
}

Here, inputValue is state. It belongs to the Form component, and it updates every time the user types something. This is something that wouldn’t make sense to manage with props — it’s not coming from a parent, it’s happening inside this component.

---

Interview Angle:

• “What’s the difference between props and state?”
  Props are passed in and read-only.
  State is managed internally and can change.

• “When would you use one over the other?”
  Use props to configure or customize components from the outside (e.g., button labels, colors, sizes).
  Use state to keep track of things that change while the component is in use (e.g., input values, toggles, counters, whether a dropdown is open).

---

7. Component Lifecycle

Every React component goes through a lifecycle: mounting, updating, and unmounting.

• In class components, lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount handle side effects and cleanup.

• In functional components, we use the useEffect Hook to simulate this behavior.

Example:

useEffect(() => {
  // runs on mount
  console.log("Component mounted");

  return () => {
    // runs on unmount
    console.log("Component unmounted");
  };
}, []);

The empty dependency array [] ensures the effect runs only once — like componentDidMount. The return function handles cleanup — like componentWillUnmount.

---

Interview angle:
"Where would you clean up event listeners or cancel timers?"
→ Inside the return function of useEffect.

Tip: Understand when useEffect runs (after paint), and how it differs based on the dependencies passed in.8.

---

8. Controlled vs Uncontrolled Components

Controlled components are form inputs where React state controls the value. Every change updates state, and the displayed value comes directly from React.

Example:

const [name, setName] = useState('');
<input value={name} onChange={e => setName(e.target.value)} />

Uncontrolled components let the DOM manage the input’s value internally. You access the current value using refs when needed, not on every change.

Example:

const inputRef = useRef();
<input ref={inputRef} />
// Later, get value with inputRef.current.value

When to use uncontrolled?

• When you want simple forms without continuous React updates — for example, a contact form where you only read values on submit instead of every keystroke.

• For quick prototypes or integrating non-React code — like wrapping a third-party widget or legacy form that manages its own state.

• When performance is critical and you want fewer renders — large forms with many inputs benefit by reducing React state updates.

• When working with inputs like file selectors where syncing with React state is tricky or unnecessary.

Interview angle:
Be ready to explain the difference and when uncontrolled inputs might be appropriate despite controlled being the norm.

Tip: Controlled inputs are preferred for predictability, validation, and easier state management in most React apps.

---

9. Lifting State Up

When two sibling components need to share state, you move it up to their common parent. This way, the shared state lives in one place and flows down as props.

Example: Syncing input and display between siblings

function Parent() {
  const [text, setText] = useState('');

  return (
    <>
      <InputComponent text={text} onTextChange={setText} />
      <DisplayComponent text={text} />
    </>
  );
}

function InputComponent({ text, onTextChange }) {
  return (
    <input 
      value={text} 
      onChange={e => onTextChange(e.target.value)} 
      placeholder="Type something..."
    />
  );
}

function DisplayComponent({ text }) {
  return <p>You typed: {text}</p>;
}

Interview angle:
“How would you sync form input and display logic between components?”

Tip: Draw the component tree — it helps you visualize where the state lives and how data flows.

Parent
 ├── InputComponent (receives `text` and `onTextChange` as props)
 └── DisplayComponent (receives `text` as a prop)

---

10. Reconciliation

Reconciliation is React’s process for comparing the previous Virtual DOM with the new one after a state or prop change. Instead of re-rendering the entire UI, React calculates the minimal set of changes needed and updates only those parts in the real DOM — making rendering efficient and fast.

How it works:

• React creates a Virtual DOM tree.

• When state/props change, it creates a new Virtual DOM.

• React diffs the old and new trees to find differences.

• Only changed elements are updated in the real DOM.

Example:

When rendering lists, React uses key props to identify which items changed, were added, or removed.

{items.map(item => (
  <li key={item.id}>{item.name}</li>
))}

Without stable keys, React can’t properly track elements, causing unnecessary re-renders or bugs.

Interview angle:
Be ready to explain how React’s reconciliation optimizes performance, like, why using keys in lists is crucial for this process.

---

11. Code Splitting

What it is: Splitting your app’s code into smaller chunks that load on demand, improving initial load time and performance.

Common tools:

• dynamic import() for lazy-loading modules

• React’s lazy() + Suspense for lazy-loading components

Example:

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

Interview angle:
“How to improve React app performance?” — mention code splitting and bundlers like Webpack or Vite that automate chunking.

---

12. UI Component Libraries vs Custom Components

UI Libraries: Pre-built, styled, and accessible components (e.g., MUI, Chakra UI, Shadcn, Daisy UI, Recharts). They speed up development but may limit customization.

Custom Components: Built from scratch for full control over design, behavior, and branding, but take more time.

Interview angle:
“Have you used UI libraries? When build custom?”

Tip:
Discuss trade-offs:

• Libraries = faster dev, consistent UI, built-in accessibility

• Custom = tailored design, unique branding, full control

---

Final Thoughts from Future Me

Prepping for React interviews isn’t just about memorizing answers — it’s about understanding the “why” behind the buzzwords.

Here’s what’s helped me the most:

• Mock interviews with friends and mentors

• React interview prep tech talks and webinars

• Revisiting projects and explaining them out loud

• Reading the React Documentation (again and again), gotta learn to Think In React!

And writing this article — seriously. It’s helped me map out the territory so I don’t feel lost when the questions come.

This is by no means an exhaustive list — but it’s a solid foundation. Each of these concepts has come up in my learning journey and in actual interviews. Bookmark this article, revisit it, and let it be your prep buddy as you move toward your next React role.

So if you're on this path too — maybe just starting out, maybe already in your first tech job, maybe preparing for something big — bookmark this list. Come back to it. Add to it.
You’re not alone in this prep journey.

Let’s ace the next one.