How to prepare for a React interview
Prepare for a junior React interview: the core concepts to explain, the coding tasks to practise, and short example answers for state, props, effects and lists.
A junior React interview usually has two parts: questions where you explain how React works, and a small coding task where you build something live. The good news is that both draw on a short list of ideas. If you can explain components, props, state, lists, forms, and effects, and build a few small components from memory, you are well prepared. Every topic below maps to a lesson in React Fundamentals (opens in a new tab), so you can review and practise as you go.
This guide covers the concepts to know, example answers you can adapt, the coding tasks worth practising, and a simple plan for the week before your interview.
Concepts to explain clearly
Components and JSX
A component is a function that returns a description of part of the UI. JSX is the syntax that lets you write that description in a markup-like form inside JavaScript. Components let you split a page into reusable pieces. See Your First Component (opens in a new tab) and Composing Components (opens in a new tab) if you want to review.
function Greeting({ name }) {
return <h1>Hello, {name}!</h1>
}Props vs state
Props are inputs a component receives from its parent, and they are read-only. State is data a component owns and can change over time, and changing it causes React to render the component again. A good short answer: props flow down, state lives where it is owned. The lessons on Passing Props (opens in a new tab) and State With Usestate (opens in a new tab) cover both.
useState and updating state
useState gives a component a value and a function to update it. Never change state directly. Always produce a new value, especially for objects and arrays.
import { useState } from 'react'
function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(count + 1)}>
Clicked {count} times
</button>
)
}A common follow-up is how to update an array or object in state. Create a copy instead of mutating:
// Wrong: mutates the existing array
// todos.push(newTodo)
// setTodos(todos)
// Right: create a new array
setTodos([...todos, newTodo])See Updating Arrays In State (opens in a new tab) and Updating From Previous State (opens in a new tab). When state logic gets more complex, you may be asked about useReducer. We compare them in useState vs useReducer.
Handling events
You pass a function to an event prop such as onClick or onChange. Pass the function itself, not the result of calling it. onClick={handleClick} is right, while onClick={handleClick()} runs the function during render. Review Handling Events (opens in a new tab).
Lists and keys
To render a list, map over an array and return an element for each item. Each element needs a stable, unique key so React can track which items changed, moved, or were removed.
function TodoList({ todos }) {
return (
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
)
}A frequent follow-up: why not use the array index as the key? When items can be reordered, added, or removed, an index can attach state to the wrong item. Use a stable id from your data when you have one. See Lists And Keys (opens in a new tab).
Controlled inputs
A controlled input is a form field whose value comes from state, and whose changes update that state. React is then the single source of truth for what the input shows.
function SearchBox() {
const [query, setQuery] = useState('')
return (
<input
value={query}
onChange={(event) => setQuery(event.target.value)}
/>
)
}The Controlled Inputs (opens in a new tab) lesson walks through it.
Lifting state up
When two components need the same data, move the state to their closest common parent and pass it down as props, along with functions to update it. This is a very common interview topic, because it shows you understand how data flows. See Lifting State Up (opens in a new tab).
useEffect
useEffect runs code after React renders, for things that reach outside the component such as fetching data, timers, or subscriptions. The dependency array controls when it runs: an empty array runs it once after the first render, and values in the array make it run again when they change. A function you return is cleanup, and it runs before the next effect and when the component unmounts.
function User({ id }) {
const [user, setUser] = useState(null)
const [error, setError] = useState(null)
useEffect(() => {
let ignore = false
fetch('/api/users/' + id)
.then((res) => {
if (!res.ok) throw new Error('Request failed')
return res.json()
})
.then((data) => {
if (!ignore) setUser(data)
})
.catch((err) => {
if (!ignore) setError(err)
})
return () => {
ignore = true
}
}, [id])
if (error) return <p>Something went wrong.</p>
if (!user) return <p>Loading...</p>
return <h1>{user.name}</h1>
}The ignore flag stops a slow, outdated request from overwriting newer data when id changes. You can go deeper in React useEffect explained and the lessons on The Dependency Array (opens in a new tab) and Fetching On Mount (opens in a new tab). Always handle loading and error states, as in Loading And Error States (opens in a new tab).
Coding tasks to practise
Live coding rounds for junior roles tend to use small, familiar tasks. Practise building each of these from an empty file, without looking anything up:
- A counter with increment, decrement, and reset.
- A to-do list where you can add, complete, and remove items.
- A filtered list with a search box that narrows the visible items as you type. The Search And Filter (opens in a new tab) lesson in the course project builds exactly this.
- A form with controlled inputs and basic validation.
- A data-fetching component that shows loading, error, and success states.
- A toggle such as a show or hide panel, or a tabbed view.
For each one, say out loud what state you need before you write any JSX. Interviewers care a lot about how you decide what belongs in state.
You can practise much of this on start.dev/challenges, which has React challenges you can solve in the browser. Fix the Mutating Todo State and Fix the Product Search Filter mirror two of the tasks above, and Build a Character Limit Textarea is good controlled input practice.
Common mistakes to avoid
- Mutating state. Using
pushor assigning to an object property, then setting the same reference. - Missing or wrong keys. Forgetting keys, or using indexes for lists that change.
- Wrong dependency arrays. Leaving out values the effect uses, or creating infinite loops by updating state an effect depends on.
- Storing derived data in state. If you can calculate a value from props or other state during render, do that instead of syncing a second copy.
- Calling the handler instead of passing it. Writing
onClick={doThing()}.
A one-week plan
- Days 1 and 2: Review components, props, state, and events. Rebuild a counter and a to-do list from memory.
- Days 3 and 4: Review lists, keys, controlled inputs, and lifting state up. Build a filtered list and a form.
- Day 5: Review effects and data fetching. Build a component that loads data with loading and error states.
- Day 6: Do a mock interview with a friend. Explain your choices out loud while you build.
- Day 7: Rest, and skim your notes. Prepare two or three questions to ask the interviewer.
If your JavaScript fundamentals are shaky, spend time there too, since many React questions are really JavaScript questions. Our guide to JavaScript array methods covers map and filter, which you will use constantly.
Where to practise
The fastest way to get comfortable is to build components yourself with feedback. React Fundamentals (opens in a new tab) takes you through components, props, state, lists, forms, and data fetching with code you write and run in the browser, which is the same way you will be asked to work in an interview. Each module ends with a knowledge check, and the closing project, starting at What Youll Build (opens in a new tab), has you fetch a list, build a grid of cards, and add search, filter and a detail page. For extra repetition, try the React State & Props challenge set.
