HomeTechnologyReact Coding Interview – How to Stand Out and Ace the Challenges

React Coding Interview – How to Stand Out and Ace the Challenges

As a React developer, I have gone through my fair share of entrance-end coding interviews. Recently, I had the opportunity to experience the process from the other side – as an interviewer. Here is what I’ve learned.

Coding interview usually involve a multi-step process where interviewers assess everything from basic technical knowledge to tradition fit. Every step of that process is necessary and should not be underestimated. Prepare for all of it and prepare well.

But there is 1 thing that is at the core of (almost) every React interview.

Inevitably, at some point, you have to construct a React app.

Here is a quick list of real app assignments I had to complete for my own React interviews over the years:

  • Support Desk app – an app to display a list of support desk representatives and their contact information.
  • Video app – an app where, given a YouTube video URL, it displays it on the page. Users can comment on it.
  • Projects app – an app to display a list of on-going initiatives that users can subscribe to and follow.
  • Articles app – an app to display a list of articles where users can leave nested feedback for each 1.

These assignments are, in many ways, very identical to each other. The reason is that they are assessing the same set of basic React skills. Which skills are those? Let’s break them down.

Interview Skill #1 – How to Build UIs with React

A primary job of a React developer is to construct and structure React components in a significant way.

The assignments above are meant to test your ability to write code in a modular and reusable way while creating abstractions at the right level.

The main goal is for your app to work well. But, as a entrance-end developer, you are also anticipated to construct UIs that gaze fine, too.

Most of the time, the task will approach with a concrete design you’ll need to follow. If that is the case, it’s necessary to stick closely to it.

But if you consider that there is a fine reason to deviate, don’t hesitate to do so. Just be prepared to elaborate why your resolution is better.

If there is no design available, the interviewer is probably interested in understanding if you can create sensible UIs on your own. Although this could be more challenging, it also gives you the opportunity to show you are able to make conscious choices when it comes to the entrance-end.

Tip: It is easy to assume that the expectation is that you have to construct all components from scratch. Using a third party component library might feel like dishonest in an interview context. But it is not!

Make sure to ask in advance what is anticipated. Taking advantage of component libraries like MaterialUI or ChakraUI  is a huge time saver during interview assignments and will allow you to focus on more interesting parts of the app.

Interview Skill #2 – State Management in React

Another necessary challenge when it comes to building React apps is state management. There is a myriad of ways to go about this relying on your concrete use case and goals. Check out my article on the topic if you are curious to learn more.

Whatever approach you choose, what is necessary during as interview task is to show the interviewer that you understand and are able to reason about state management.

Your resolution needs to make sense without being overly complex or convoluted. Be prepared to elaborate and defend your choices.

Tip: It is a fine thought to match your state management resolution to the 1 used by the company your are interviewing for.

Do they use Redux? Then don’t hesitate to include Redux in your project. Are they into state machines? Then xState is your friend, and so on. Make sure to ask the interviewer in advance what they would like to see implemented in your project.

Interview Skill #3 – Data-fetching in React

As a entrance-end developer, normally you won’t be anticipated to construct your own back-end. But the task you are given will probably involve some form of data-fetching – likely either through a mock API of some kind or just a JSON file with the necessary data.

This part of the task is meant to test if you, as a entrance-end developer, know how to talk to the back-end. Can you get, display and update the data you receive from the back-end properly? Do you understand how API requests work?

In a more advanced setting, there might be a dialog about data-fetching architecture, data state management, and entrance-end caching.

Tip: Make an effort to implement a semi-realistic data-fetching mechanism in your app. In you are given a JSON file, don’t just immediately import the data in your components. Instead, use fetch or another more advanced (preferably async) approach to get it so that you are able to demonstrate your deeper understanding.

Interview Skill #4 – Routing in React

A lot of the time, creating a React project is synonymous with a single page application. So it is possible that the task includes implementing a routing resolution.

Here the goal is to demonstrate that you understand the fundamentals of client-side routing and are able to structure your app around it.

Tip: Avoid creating your own client-side routing implementation, until explicitly required. Opting for React Router or Reach Router is a perfectly acceptable choice.

Getting a solid grasp on the fundamentals mentioned above is a should and it’s a fine start to earn points during an interview task. But to truly stand out, you have to go a step further.

Here is how.

Understand Your Setup

Most of the time you can get away with using toolchains like Create React App (or identical) when building a React project for an interview. This will help you get initiated and save time.

In fact, it is necessary to use those tools in order to spend your time on significant development rather than setup.

But it’s also necessary to understand and be able to elaborate the basic tooling you are using. During a React interview, expect to be requested questions about Webpack and Babel, for example.

But what can really give you an edge is if you not only understand but are able to enhance your existing setup. One thought would be to add a linter (eslint) and a formatter (prettier) to your app. This shows that you really care about code quality and consistency.

Another would be to go even further and setup pre-commit hooks (husky) that lint and format your code with each commit. Crazy, I know!

These tools take minutes to setup but can seem like an spectacular extra step in the eyes on an interviewer.

Test Your Code

Very few assignments will explicitly state that checks are required. For this reason, many developers assume checks are not part of the task and completely ignore them. This is inaccurate!

Most of the time, an interviewer will be impressed to see that you understand the significance of testing your code. It is a very easy but powerful way to set yourself apart.

It is not necessary to have a test for every single line of code in your project. Several strategically selected checks masking the more complicated logic should do the trick just fine.

Don’t Ignore Responsiveness

Here is another aspect of your React task that is not explicitly mentioned most of the time – responsiveness.

Even if you are given a design at the beginning of the task, almost always it will not be a responsive 1. It is up to you care enough about responsiveness to determine it out on your own.

Same as testing, most developers will just ignore responsiveness. Which is fine news for you – it gives you the opportunity to shine!

There is no need for the implementation to be excellent and work flawlessly on every screen and device. The mere fact that this is something you though about in your development process should be enough to score you some major points.

Improve Accessibility

Accessibility is a huge concern for most modern web products. Taking even minor steps to improve the accessibility of your project, like adding alt text to your images, for example, can leave a really fine impression.

Accessibility is also another reason why you might want to choose a third-party component library when building your task. Most components in these libraries are accessible out of the box.

Making your project as accessible as possible can truly make you stand out in an interview. But what is more, accessibility should be (and is becoming) the norm in web development. Make sure your prospective employer knows you understand that.

Details Matter

Everything in your code should inform the interviewer you are a competent developer – from fundamentals like the way you name and structure your code to minor details like commit messages.

Given that these assignments are usually done under time constraints, it is tempting to just ignore these apparently unimportant aspects. But getting them right can meaningfully set you apart.

Hopefully this article is useful for your next React interview. Let me know how it goes!

Follow me on Twitter for more tech content.

Go to the source

Most Popular