If you're hiring a React.js developer, make sure you ask these 10 interview questions
React.js is often talked about as one of the most popular front-end frameworks for web applications today. As an open-source JavaScript library, this is ideal for building user interfaces for single-page applications, especially the view layer for mobile and web apps. Therefore, if you are planning to build such an application, React.js can be a suitable development technology. For those who are ready to hire a React.js developer, it is essential to conduct the interview by asking the following questions that cover basic knowledge as well as advanced concepts.
1. What is React.js?
Since the interview is about selecting a React.js developer, this is an ideal question, to begin with. While it may come across as a relatively simple question, it will tell you a lot about what the candidate perceives React.js to be and how comfortable they are explaining this concept. The response to this question will also highlight the candidate’s understanding of the larger JavaScript ecosystem.
Further, you can seek to expand the candidate’s response by asking them how React.js is different. In this instance, the candidate’s answer will be drawn largely on their own experience with this technology. Hence, you can get a better insight into their knowledge and capabilities. You can ask them to provide real-life instances or experiences that have helped form their opinions.
Some follow-up questions can include the following:
How much of the code can you reuse while rewriting an application like AngularJS in React?
What limitations might one suffer while developing large applications in React since it typically works on a smaller part of building user interface components?
2. What do you know about JSX?
JSX is a newer dialect of JavaScript embedding raw HTML templates inside the JavaScript code. Questioning the candidate on JSX serves 2 purposes: one, you can assess whether the candidate is well-versed with the concept, and two if they can support their knowledge of the concept based on actual experience.
As a code, the browser is not capable of reading JSX. For this reason, the code must be attached to a more traditional JavaScript with the help of tools like webpack and Babel. While most developers may not be required to actually use JSX for writing applications in React.js, most prefer to still use it since its syntax helps in reducing the overall complexity of the code. Further, the candidate can be asked to state the pros and cons in detail about their opinion with respect to the use of JSX in React to justify their position.
3. What do you understand by the term ‘Stateless Components’?
An experienced React.js developer will be aware that React components are state machines and they generate user interface markup. However, it is important for the developer to know what is meant by stateless components as well. The key differences include:
Stateful components have the authority to change which stateless components so not.
Stateless components are designed to calculate the internal state of these components. Stateful components, on the other hand, are designed to store all information pertaining to the component’s state change in its memory.
Stateful components get notifications from stateless components regarding any requirements for a state change. Once this is received, they send across the props to them. Stateless components receive these props and regard them as callback functions.
Lastly, stateful components include the knowledge of any past or current state-related changes. Further, they also contain knowledge about any possible future state changes as well. Stateless components have no such knowledge.
4. What do you know about Flux?
As a concept, Flux is extremely simple to understand. However, the purpose of this interview is to challenge the candidate’s developer related knowledge pertaining to a much deeper understanding of the implementation of Flux, in this case. Therefore, it is recommended to cover discussion points like a description of Flux, comparison of Flux and MVC, testing of components built using Flux, commonly used Flux libraries, etc.
Being an architectural pattern, Flux helps in enforcing a unidirectional flow of the data. Therefore, it is necessary to control the data that is derived in order to ensure that different components can continue to react with the data without running a risk of polluting it. It has a fairly generic pattern and is not essential to build a React application. Having said that, the knowledge of Flux is fairly common among seasoned React.js developers. They mostly incorporate it to ensure that the rendered UI or view is more of a function of the store data.
5. What is VDOM or ‘virtual DOM’?
One of the most prominent features of React.js is that it uses Virtual DOM in place of real DOM. it is a lightweight JavaScript object and is considered as a copy of real DOM. Virtual DOM functions in a ‘tree-node’ manner where each element is listed as an Object highlighting their attributes, content, and properties.
Large apps have made the use of DOM trees very popular today. More importantly, the increasing demand of dynamic web applications has created a need to continuously modify the DOM tree resulting in critical performance as well as development effort on the part of a React.js developer. Therefore, it is essential to question the React.js developer on Virtual DOM exhaustively to ensure that the concept, as well as its application, is well understood.
6. What is the use of refs in React.js?
Refs or references in React.js are best understood as attributes that assist in storing a reference to a specific react component or element. This will be given back by the component’s render configuration function. Their main function comes into play when the developer requires DOM measurements, or they are adding methods to the components.
7. What is the difference between ‘state’ and ‘props’?
Props or properties are configurations of a component whereas, State is a data structure. State initiates with a default value as and when a component is mounted. As a result of user events, this can mutate.
Props largely exhibit how different components interact with each other. They are immutable in the sense that the component cannot change or modify its respective props, however, its main responsibility lies in collating the props of its offspring components. Apart from data, callback functions can also be considered as props.
If a candidate is not thorough with the concepts of State and Props, then this will be reflected in their answer. At a high level, both State and Props perform similar functions and can be confused easily. However, they perform these similar-looking functions in a very different manner. And this is what you are looking for in the developer’s explanation.
8. What is Redux?
Redux supports the concept that there must be only one source of truth with respect to the application state. This can be a Data state or even a UI state. Hence, the entire application is in a single store. In other words, this store is a JavaScript object and this state can only be modified by first firing actions and subsequently writing any reducers for them to modify the state.
9. What are ‘controlled components’ and ‘higher order components’?
Simply speaking, with the help of a controlled component all state mutations come with an associated function known as handler function. This is essential to validate or even modify the user input. Typically, after a user has submitted a form, the values from different elements in the form of HTML are sent along with the form. However, in React.js, the component that contains the form will also keep a track of all the values of the input in their state and also re-render each component every time the callback functions. These are known as controlled components as their value is controlled by React.js.
While controlled components are generic React.js techniques, HOC or higher order components are a more advanced technique. They are mainly a pattern that is created as a result of React.js’s compositional nature and are employed in reusing component logic and are not React APIs. HOC knowledge is an excellent advantage specially to avoid repetitive code writing efforts using the same code.
10. What are the advantages and limitations of using React.js?
Lastly, asking the candidate to list out the positives as well as the negatives of React.js will help you assess how well the candidate has experienced this development technology. Prominent positives of using React.js include the following,
React.js can be used easily on the server side as well as on the client side.
It is capable of enhancing the performance of the application
Incorporating JXS can increase code’s readability
It can be easily integrated with other frameworks including Angular, Meteor, etc.
Writing UI test cases can become exceeding convenient with React.js
While there are no prominent negatives, the technology does come with certain limitations that the candidate must be aware of. This foresight can help the developer plan ahead and work to meet the deadlines. Some main limitations include the following,
React.js is not a full-blown framework. It is merely a library.
This is not an easy technology for inexperienced developers to understand and comprehend
This is mainly because the library is massive in size and can take an immense amount of time to understand.
Lastly, React.js uses JSX and inline templating. This can make the coding an uphill and complex task even for experienced React developers.
Final thoughts
The aim of a technical interview should be to gain as much insight into the candidate’s abilities. As an interviewer, you must refrain from cornering the applicant unnecessarily with superfluous whiteboard exercises. The interview should be conducted to assess how well the applicants can articulate their intelligent opinions.
Further, you must be satisfied that the individual’s knowledge is supported by enough experience of their own. Therefore, this list of questions is not exhaustive, but it does contain some essential questions that you can use to build your very own React.js developer interview script.
Lastly, record the interview discussion to deliberate, preferably with a colleague, to get a better insight into the applicant’s capabilities.