How do I prepare for a React interview?

Work through realistic questions, read why each answer is right, then redo the ones you missed. This test has 24, from beginner to advanced, of the kind interviewers commonly ask. Then read the postings: the 5,868 open jobs that name React show what employers expect on top of it.

Is this React test free?

Yes. It needs no account and no email, runs in your browser and sends nothing anywhere.

What does my score mean?

It is a self-check. 80% or more right means the basics are fresh; half to 80% means a good base with gaps; under half means more practice first. The result also shows your score by topic, so you know what to study. It is not an official certificate.

How can I test my React skills?

Build a small app of your own, such as a to-do list that loads its items from a server: split it into components, keep the form in state, load data in an effect with a cleanup, and explain why each piece of state lives where it does. Then take this test and read the explanation for every answer you miss.

Is React hard to learn?

The basics (components, props, state and events) come quickly if you know JavaScript. The parts that hiring tests go deeper on are effects and their dependency lists, keys, when components render again, and how to keep a large app’s state simple.

What is the difference between props and state?

Props are inputs a component receives from its parent and may not change. State is data a component owns and can change with its setter function, and each change makes React draw the component again.

What do employers expect from a React developer?

Solid JavaScript first, then components, hooks, handling forms and loading data, and usually TypeScript and a way to test components. The postings on this site list the other skills asked for next to React.

Home / Skill tests / React

React test: 24 questions to check yourself

In plain words: React is the most widely used toolkit for building website screens out of small reusable parts called components. Answer 24 questions, press the button, and see which you got right, why, and your score by topic.

5,868 open jobs name React today, with a median advertised pay of $200K. 24 questions from beginner to advanced, about 10 to 15 minutes, the kind that come up in interviews.

1What is a React component? Beginner · ComponentsA style rule that colours one part of a pageA function that returns a description of one part of the screenA file that stores data on a serverA browser add-on that makes pages load faster

2What is JSX? Beginner · JSXA way to write markup inside JavaScript; a build step turns it into ordinary function callsA database language used by React appsA language that browsers run directly, with no conversionA tool that tests components

3How does a parent component pass data to a child? Beginner · PropsBy changing the child’s state from outsideBy saving it in the page addressThrough props, written like attributes: <Price amount={20} />By editing a global variable called props

4Can a child component change the props it receives? Beginner · PropsYes, by assigning a new value to props.nameYes, but only inside useEffectOnly when the props are numbersNo: props are read-only, so the child asks the parent to change them, usually through a function passed as a prop

5What does useState return? Beginner · StateA copy of the value that never changesThe current value and a function that sets a new oneA promise that resolves to the valueThe props of the component

6What is wrong with <button onClick={save()}>? Beginner · EventsNothing; it runs save when the button is clickedonClick must be written in lowercaseIt calls save while the page is drawn, not on a click; write onClick={save} or onClick={() => save()}Buttons cannot have click handlers in React

7Why does React ask for a key on every item of a list? Beginner · Lists and keysTo tell items apart between renders, so it updates the right onesTo sort the list in alphabetical orderTo make the list download fasterTo style each item differently

8When does a component run again (render)? Beginner · RenderingEvery second, on a timerOnly when the whole page is reloadedOnly when its parent is removedWhen its state changes, or when its parent renders it again

9A click handler runs setCount(count + 1) three times in a row. By how much does count rise after the next render? Intermediate · StateBy 3By 1, because every call reads the same count from this renderBy 0, because React ignores repeated callsThe code throws an error

10How should you add an item to a list kept in state? Intermediate · StateCall items.push(x) and then setItems(items)Change the array in place and reload the pageGive state a new array: setItems([...items, x])Assign it directly: items = [...items, x]

11What does useEffect(fn, []) with an empty dependency list do? Intermediate · EffectsRuns fn once, after the first renderRuns fn after every renderNever runs fnRuns fn before the first render

12What is the function that an effect returns used for? Intermediate · EffectsHanding the effect’s result to the componentStopping the component from renderingTrying the effect again if it failedCleaning up before the effect runs again or the component leaves, for example removing a listener or a timer

13An effect reads userId, but the dependency list leaves it out. What can go wrong? Intermediate · EffectsReact shows a build error and stopsThe effect keeps using the userId from an earlier render, so it can show out-of-date dataThe effect runs twice as oftenuserId turns into undefined

14Why must hooks not be called inside an if or a loop? Intermediate · Hooks rulesHooks are too slow inside loopsJSX does not allow the word ifReact finds each hook by the order of the calls, so the order must be the same in every renderIt is only a style tip that linters like

15What makes an input “controlled”? Intermediate · FormsIt has the required attributeReact hides it from the userIt stays disabled until the form is validIts value comes from state, and every change goes through onChange

16What is Context for? Intermediate · ContextMaking a value reachable by many components below, without passing props through every levelSaving data in the browser between visitsLoading data from a serverSplitting an app into several files

17When is useRef a better fit than useState? Intermediate · RefsWhen the value must appear on the screenWhen you need a value, or a page element, that lasts between renders and changing it should not cause a new renderWhen the value is a listNever; they do the same thing

18Why is an item’s array index a poor key in a list that can be reordered? Intermediate · Lists and keysIndexes are slow to compareReact forbids numbers as keysWhen items move, a key points to a different item, so typed text and state can end up on the wrong rowIndexes are not unique

19What is a custom hook? Intermediate · Custom hooksA hook sold by a third-party storeA hook that React adds by itselfA component that returns nothingA function whose name starts with use and that calls other hooks, so several components can share the logic

20When is useReducer a better choice than useState? Intermediate · ReducersWhen the next state depends on several values and there are many kinds of change, so the rules sit in one placeWhen there is a single true or false valueWhen you need to fetch dataAlways; useState is outdated

21What does React.memo do? Advanced · PerformanceStores a component’s output on the serverSkips rendering a component again when its props are the same as last timeRemembers a component’s state between visitsStops a component from ever updating

22A component wrapped in React.memo still renders every time. Its parent passes onSave={() => save(id)}. Why? Advanced · Performancememo works only on components written as classesFunctions cannot be passed as propsThe arrow function is a new object on every render, so the props always look different; useCallback keeps it the sameThe id is a number

23An effect with no dependency list calls setState with a new value every time. What happens? Advanced · EffectsNothing; React ignores the callIt runs once and then stopsReact drops it after the first renderIt renders, runs the effect, sets state and renders again, in an endless loop

24In development, an effect runs twice when the component first appears in StrictMode. Why? Advanced · EffectsReact mounts, unmounts and mounts again on purpose, to reveal a missing cleanup; it does not happen in productionIt is a bug in ReactThe browser loads the page twiceTwo components share the same effect

Questions about this test

How do I prepare for a React interview?: Work through realistic questions, read why each answer is right, then redo the ones you missed. This test has 24, from beginner to advanced, of the kind interviewers commonly ask. Then read the postings: the 5,868 open jobs that name React show what employers expect on top of it.
Is this React test free?: Yes. It needs no account and no email, runs in your browser and sends nothing anywhere.
What does my score mean?: It is a self-check. 80% or more right means the basics are fresh; half to 80% means a good base with gaps; under half means more practice first. The result also shows your score by topic, so you know what to study. It is not an official certificate.
How can I test my React skills?: Build a small app of your own, such as a to-do list that loads its items from a server: split it into components, keep the form in state, load data in an effect with a cleanup, and explain why each piece of state lives where it does. Then take this test and read the explanation for every answer you miss.
Is React hard to learn?: The basics (components, props, state and events) come quickly if you know JavaScript. The parts that hiring tests go deeper on are effects and their dependency lists, keys, when components render again, and how to keep a large app’s state simple.
What is the difference between props and state?: Props are inputs a component receives from its parent and may not change. State is data a component owns and can change with its setter function, and each change makes React draw the component again.
What do employers expect from a React developer?: Solid JavaScript first, then components, hooks, handling forms and loading data, and usually TypeScript and a way to test components. The postings on this site list the other skills asked for next to React.

More tests: SQL Excel Python JavaScript Linux Docker All tests