How to Hire a React Developer
If you go to sleep tonight knowing everything there is to know about JavaScript, you’ll have two new frameworks to learn by the time you wake up. Software development can be quite a dynamic job, but front-end, in particular, is known to be the most chaotic, so much so that many devs would say that “front-end” and “stability” don’t even belong in the same sentence.
Luckily, there’s been a shift towards stability in recent years, with React JS taking the role of the undisputed champion of front-end libraries. Statistics consistently show it as the most used and loved framework, something that’s reflected in any given job board.
But even with such a massive demand and most coding boot camps out there strongly focusing on the library, finding great React developers can still be a challenge.
In this guide, we’ll cover the technical features that a React dev should know, the qualities you should look for, and the interview questions you should ask in order to find the best developers for your project.
Table Of Contents
Why Hire a React Developer?
React was created by Facebook back in 2013 and has remained relevant for years upon years. Surveys consistently show it as the top JavaScript framework since 2016, with at least three times the market share of Vue and Angular (its closest competitors) combined.
Choosing React for your application means having access to the broadest pool of developers, tools, and resources. It has a solid, diverse and expansive community, and it’s backed by Facebook and used by giants like Instagram, Pinterest, Airbnb, and Discord.
So if anything in front end can be considered stable, this is it. If you want your application to be the closest it can to future proof, look no further.
Background & Relevant Experience
Soft Skills
Intangible traits may not be the keywords you filter by when scanning through resumes, but we believe they are what makes for great programmers. Anyone can learn a new framework with relative ease, but getting the right mindset and culture fit to push your project forward can be more challenging.
Look for people with great communication skills and a positive attitude, the building blocks of a true team player. Someone that can be trusted to take responsibility and even lead when needed, enjoys teaching others as much as learning new skills, has good time management and can see the bigger picture.
Creativity is an important skill to look for in a front-end developer. There are unlimited scenarios when it comes to building UIs. When working with a framework like React.js, creativity will contribute to design components that can be reusable and yet efficient in terms of how adaptable they might be to different scenarios. Once the logic is in place, styling comes as a valuable aspect that weighs into the user experience.
Finally, your React Developer has to have problem-solving skills. This comes with being resourceful and having the ability to learn how to learn. The framework changes at a high pace, therefore it is important to gather as many resources as possible to face new challenges. To assess both of these skills, you can ask your developer to tell you what has been the most challenging UI he has ever built and what sort of components were designed to achieve it. Dive deeper into what his thought process was to know more about his experience.
When Did They Start Working With React and Why?
This will tell you how easy or how hard it was for them to learn this framework and also show some of their personality on whether they tend to aim for the shiny new thing or prefer stability. Early adopters will obviously have more experience with the framework itself and probably have a better instinct for where to place their bets, while those who joined later may be better at planning for the long term.
The whys are incredibly important to gauge their grasp of concepts such as maintainability, scalability, performance, and other aspects of app development critical for success. There’s a reason why React got to such a dominant position on the market and why many other frameworks followed its steps in concepts such as the declarative, state-driven approach to coding and the use of a virtual DOM. Nothing wrong with just following the trend, but a developer with solid reasons for choosing React shows a higher level of architecture knowledge.
How Many Years Have They Worked With React?
We could say that the more, the better, but there’s a catch: the library has changed quite a bit throughout the years. The way we write React today has little in common with what we did just 3 years ago, while 5+ years old codebases would pretty much be considered legacy code.
So if your candidate has invested many years in the platform, great! It shows a strong commitment to the framework and you can rest assured that whatever problem arises they have faced it before, leading to faster and better solutions.
But even if they don’t have that many years working with React but possess solid skills in JavaScript and other frameworks, they may still be a solid choice.
What Other JavaScript Frameworks Do They Know?
Curiosity and learning ability are great traits to have in your developers, and knowing multiple frameworks shows they have the right mindset to adapt to the ever-changing front-end environment.
Look for experience in similar libraries such as Preact, Vue, Angular or Svelte. Experience in older frameworks such as jQuery doesn’t apply in such a straightforward way, but still shows they’ve been around for quite some time and may possess the soft skills that only come with experience.
Ask them why they choose to work mainly with React, and under which circumstances would they go with any of the others instead. If they know the pros and cons of many frameworks, they’ll also know how to use the chosen one to its full potential.
What Sort of Projects Have they Built with React?
React can be used for all kinds of projects, from personal to enterprise. Some variety in their background is always welcomed, but it’d be great if they have been working with distributed, diverse teams, have experience working with similar-sized teams in similar-sized applications, and using the same methodologies and architectures.
Have They Worked on Something Similar in the Past?
There’s no better teacher than experience, so if they have worked on a similar project before, they may be better prepared to deal with some of the particular challenges of your industry, anticipate the issues that may arise and know where to focus to provide the best results
Technical Skills to Look For in React Developers
Having the right cultural fit and background is incredibly important, but at the end of the day, a developer’s job is writing code, so they must also have the right skill set.
Let’s check some of the key technical skills to look for when assessing a React developer’s capabilities.
ES6+, AKA Modern JavaScript
It’s easy to find developers so focused on the library that they seem to forget that React is, at the end of the day, still JavaScript. This approach, sooner or later, will get them stuck or result in sub-par code.
Therefore, we would recommend evaluating their base JS skills, to know if the developer understands the foundational aspects of the language and how to use it in order to produce elegant code.
JSX
JSX is an HTML-like syntax embedded in your JS code, giving us the ability to create the components’ layout in an easier-to-read format. It gets transpiled into regular JS at build time but makes for a much smoother developer experience when coding it.
Therefore, any React developer should be a master of the JSX syntax.
State Management – Redux, React-Hooks, Flux
State management is a very important aspect of any React project since it defines the way the application handles the data across its components. During a technical test, it’s important to understand the decisions that the developer makes regarding this matter, not just because it’s time-consuming but because there are different approaches. For instance, the candidate might decide to go with Redux or Flux for a large application and choose to solve the test by using react hooks to handle the local component state. Either way, this is a strong point where we recommend you to ask questions and pay attention to whether they understand how to dispatch actions and manage reducers.
Most Popular Libraries
In such a large open-source community there are high chances to run into high-quality libraries and very bad ones. It’s interesting to see what kind of libraries your developer chooses in order to solve a specific problem. There are some that are very popular and you want to know if they are familiar with them but when you are dealing with a very specific problem the criteria to use in order to choose the right library will tell you more about their level of experience.
Component Life Cycle and States
Understanding the React component life-cycle is very important and is not easy at first. There will be situations where having a deep understanding of how this life cycle works will make the difference between a senior React developer and a junior developer. Initialization, mounting, updating and unmounting should be part of any React test and you want to make sure your developer understands every step of that cycle.
CSS Frameworks, Pre-Processors and Architectures
There are multiple ways to style your React apps, and the right one depends on your particular needs. We can use pre-processors such as SASS or PostCSS, CSS libraries, or even UI toolkits such as MaterialUI.
There is a strong trend nowadays to use styled components in React projects via tools such as StroyBook to document these as a custom library. But whatever their approach is, the most important thing when assessing your React devs’ approach to CSS is knowing why they choose a given architecture and library.
The right tool for a project can be nothing but a pile of technical debt for another, so choose people capable of making informed decisions instead of blindly following a particular approach.
Project Structure
During a technical test there are a few things you want to pay attention to regarding their initial setup, for example:
- How they organize their code: Following a clean structure using proper naming conventions is always great to see. Creating layers and dividing responsibilities among them will show expertise.
- How do they fetch data: Where they choose to add this particular code is a key aspect that will showcase their ability to write clean code. Also, you want to see what libraries they use to perform the actual fetching, and here you want to check if they know how to handle promises with proper error handling and how do they parse the response.
- Important files to see: There are certain files that you want to see under their project structure and one is the .env file and a constant file too. This will tell you that they are prepared for a real project that might be deployed in different environments using different constant values. You want to see them avoid hardcoded values, choosing to make the project configurable and adaptable instead.
Componentization and Props – Reusable Components, Small
Writing components is what React Developers do, but how to write them it’s an interesting technique that they refine over time. You want to see your developer writing small and reusable components, and there are certain mistakes that you want them to avoid, for example setting wrong value types on the initial state, or trying to modify the state directly. You want them to show you they understand the asynchronism behind the SetState function. In general the quantity and quality of the component they produce will show you the level of understanding they have about componentization.
Higher Order Components and Higher Order Functions
This is indeed an advanced technique that takes a component and converts it into another component and it’s commonly used for separating container components from presentation components. If during a technical test, the developer proactively uses them, then you can ensure you are in front of an advanced developer.
Navigation and React-Router
Choosing the most relevant approach to implement navigation within a react project represents an important decision and react-router is one of the most relevant ones. This can also trigger code-splitting strategies that can really make a difference in your web application performance metrics. Some important aspects of this library have to do with knowing how to pass props, navigate programmatically through the history prop and route config files.
Testing Libraries
There are some interesting testing libraries out there that are easy to use such as Jest, Moka, and the React Testing Library for unit testing that you want them to be able to use. It’s interesting to explore how they feel overall about writing these tests and what strategy they will use in order to do so. This is likely a good topic for an initial interview. Try to get deeper into how much they care about coverage and what are the advantages behind writing frontend tests.
Other Good Qualities in React Developers
Active Contributors
React is an open-source project, and as such it accepts contributions from anyone in the community, not just the core team. Having a candidate that’s an active contributor to the library and its environment is a clear statement of their interest in the platform and their knowledge of the ins and outs of the library.
An Eye for Design (Not Required Though)
This very much depends on how you organize the team. Some companies put the CSS tasks onto the designers, some have a dedicated CSS specialist, and some put them onto their React/front-end developers.
If you’re choosing the latter approach, it’s important that your developers have an eye for design. This doesn’t necessarily mean that they could create the designs themselves, simply that they have the ability to implement whatever the designers hand them in Figma, XD, or Sketch into a UI that respects the design choices on sizes, white space, colors, fonts, etc.
Technical Interview Questions for React Developers
If you’re interviewing a candidate for a React developer role, it’s important to assess their knowledge of the library’s core concepts and best practices. These five questions cover topics ranging from the virtual DOM and React hooks to preventing unnecessary re-renders, and can help you gauge the candidate’s understanding of how React works under the hood. By asking these questions, you can get a sense of the candidate’s experience with React and their ability to write efficient, scalable, and maintainable code. Keep in mind that these are just a few examples of the types of technical questions you might ask during an interview. If you want to see more examples, be sure to check out our complete list of React technical interview questions.
What is the virtual DOM and how does it work?
The virtual DOM is a lightweight memory representation of the DOM that we can traverse much faster for manipulation. When a change happens, React updates the virtual DOM, compares it to a previous snapshot to know exactly which elements have changed, and only updates those elements in the real DOM through a process called reconciliation or diffing.
Question: What are the phases of a React component’s lifecycle?
Mounting (when the component is added to the DOM), Update (when there are any changes to its state or props), and Unmounting (when it’s destroyed and removed from the DOM).
Question: What are React Hooks used for?
Answer: React hooks are used to hook into states and other features directly from functions, without writing a new class.
Question: Can the browsers read JSX?
Answer: JSX is not JavaScript or HTML, and therefore browsers can’t read it directly. JSX is compiled at build time into React elements, that is, JavaScript objects that the browser can read through the library.
Question: How can you avoid unnecessary re-renders in React, and why should you?
Answer: Preventing unnecessary re-renders is critical for performance. We can do so by using the shouldComponentUpdate() method.
Final Thoughts
As we’ve seen, the React ecosystem is so rich that it requires developers with deep and broad technical knowledge, but also the desire for constant improvement and the experience and wisdom to make the right calls.
