React Assessment: Sample Questions | Bryq
Beginner
Intermediate
Advanced
These are three sample questions from Bryq’s React assessment, a coding test for hiring React developers, front-end developers and full-stack engineers. The full assessment covers three levels: beginner, intermediate and advanced, from foundational concepts to hooks, component lifecycle and performance optimization. Questions test both React concepts and the ability to read code and predict its behavior, with four options and one correct answer each.
Beginner
Intermediate
Question
Clicking the button in this component doesn’t change the number shown. Why?
function Counter() { let count = 0; return <button onClick={() => count++}>{count}</button>; }
Select your answer
Changing a regular variable doesn’t trigger a re-render, so count should be stored with useState.
The onClick handler needs to be a named function.
Buttons can’t display numbers directly in JSX.
count must be declared with const instead of let.
WHY IS THIS THE CORRECT ANSWER
React only re-renders a component when its state or props change. A local variable is reset to 0 on every render, and changes to it aren’t tracked, so the count needs to be stored with useState and updated through its setter function.
Intermediate
Intermediate
Question
The count state starts at 0. What is its value after the button is clicked once?
`const [count, setCount] = useState(0);
function handleClick() {
setCount(count + 1);
setCount(count + 1);
}`
Select your answer
1
2
0
An error is thrown for updating state twice.
WHY IS THIS THE CORRECT ANSWER
Both calls read count from the same render, when it was 0, so each one sets the state to 1. To increment twice, use the updater form setCount(c => c + 1), which applies each update to the latest value.
Advanced
Intermediate
Question
What happens to count when this component mounts?
`const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => setCount(count + 1), 1000);
return () => clearInterval(id);
}, []);`
Select your answer
It increases to 1, then stops changing.
It increases by 1 every second.
The component re-renders in an infinite loop.
React throws a runtime error about the missing dependency.
WHY IS THIS THE CORRECT ANSWER
With an empty dependency array, the effect runs only once, so the interval callback keeps the value of count from the first render, which is 0. It therefore sets the state to 1 every second. Using setCount(c => c + 1), or adding count to the dependencies, fixes this stale closure. The missing dependency only triggers a lint warning, not a runtime error.
