No Time Dad

A blog about web development written by a busy dad

React Interview Questions - Counter Component

Create a component that displays a number, starting at zero, that can be increased by one each time a button is clicked. The component does not need to have any styles applied.

Explanation

With this react interview question the interviewer is looking to see if the interviewee has some basic JavaScript knowledge and that they understand how state works in React. I’d consider this question to be the React equivalent of FizzBuzz. There is also a small amount of html knowledge required to get this question right.

There are a few different ways to answer this question. I think using React hooks is a good approach for this problem. React is moving away from class based components and this shows that the interviewee is up to date on React’s best practices. Which is a good signal to give to the interviewer.

The increaseCount function is an important thing to point out here. It’s worth noting that this function is ignoring the event object that’s being passed to it by default. This might be a question an interviewer would ask about this implementation. Since the event isn’t explicitly being used here, I think it’s better to not define the event in the increaseCount function and avoid an unused argument. Doing so creates less confusion.

Lastly, I think taking the time to write semantic and accessible html is important. Even though the question stated that styling the elements wasn’t required, proper html is a big plus in my opinion. Cramming everything into a single div without child elements, or not including the type="button" attribute for accessibility might be seen as a negative by the interviewer. At the very least it should get some bonus points during the interview.