What questions do you typically ask when interviewing remote React developers?
To make things simpler, we’ve come up with a short list of ReactJS interview questions that cover some of the essential aspects of the technology. In this selection of interview questions, we’ll focus on Flux, React components, states, props, events, and other basics.
What is Flux and what are the key Flux components in ReactJS?
Even though Flux isn’t inherent to React development, it has long become a must-have for 99% of React projects. Questions about Flux demonstrate how solid your candidate’s understanding of React applications architecture is. So what exactly will you want to hear during an interview?
For starters, a hirable React developer will tell you that Flux enforces unidirectional (i.e. one-way) data flow. Besides, expect to hear about the four cornerstone components of Flux:
- Action Creators are helper methods that react to events (e.g. the user’s interactions with the UI) and pass the action to the Dispatcher.
- Dispatcher is the central hub that receives the action from action creators and triggers corresponding callbacks, passing the action to one of the Stores.
- Stores contain the data that determines the app logic and reflects the UI state. Stores receive actions from the dispatcher and respond to them by updating the data they contain and emitting change events.
Views are compositions of React components. Views respond to change events by rearranging and re-rendering their components. A change of view can also trigger an action creator, starting a new Flux cycle.
How is Flux conceptually different from MVC?
Another interview question that’s great for those cases when you want to hire React.js developers well-versed in Flux revolves around the MVC architecture. Namely, you can ask if your candidate is able to outline the main conceptual difference between Flux and MVC.
Flux stems from the idea of unidirectional data flow while in MVC, the data flow is bidirectional. As far as practical advantages are concerned, the unidirectional flow reduces the probability of unpredicted data mutations. It excludes unexpected nested updates and cascading events that are common in MVC.
A solid, hirable React developer will tell you that, on the overall, Flux’s unidirectional data flow accounts for greater predictability. This, in turn, makes the application easier to maintain and to scale.
What happens during the lifecycle of a ReactJS component?
Components lifecycle is one of the cornerstone aspects of ReactLS and an essential thing to ask about during a remote React developer interview. This particular question boils down to asking you candidate to provide you with a high-level description of the categories that React’s lifecycle events fall into.
These categories are related to the initialization, updates or destruction of states and properties:
| Initialization | State/Property Updates | Destruction |
| getInitialState() | componentWillReceiveProps() | componentWillUnmount() |
| getDefaultProps() | shouldComponentUpdate() | |
| componentWillMount() | componentWillUpdate() | |
| render() | render() | |
| componentDidMount() | componentDidUpdate() |
Another common way to categorize components lifecycle stems from the types of lifecycle methods. Namely, during a remote React developer interview, you might hear about the “Will”, “Did” and “Should” methods:
- The “Will” methods, (e.g., componentWillMount(), componentWillUpdate(), etc.) invoke a component right before an event.
- The “Did” methods (e.g., componentDidMount(), componentDidUpdate(), etc.) invoke components right after an event.
- The “Should” method shouldComponentUpdate() invokes a component before rendering, but only if it receives new props or state.
How is the process of React components creation different in ES5 and ES6 (ES2015)?
When hiring web developers, at least one of your questions needs to check your candidate’s experience with ES5 and ES6. So let’s focus on one of the most basic operations in React.js and see how it’s implemented in the two major standards of JavaScript.
When creating a React component ES5 style, your weapon of choice is React.createClass(). In the case of ES6, you’ll use extends React.Component. An essential difference between the two (and a must-know for a hirable React.js developer) is that the former has automatic binding of this. In the case of the latter, there is no autobinding.
When hiring react.js developers, it might be important to make sure that your candidate is familiar with subtle differences of this sort. The more so if this person is expected to maintain a somewhat old React.js project.
Explain the difference between Stateful and Stateless components in ReactJS.
This question seems pretty simple on the surface, yet it covers a crucial aspect of React. So if you’re aiming to find software developers with profound understanding of React, don’t forget about this one.
As the name suggests, sateless React components never change the state. Besides, they don’t access the data related to past, present, or future changes of a state.
In the case with stateful React components, everything’s vice versa. A stateful component can use the .setState() method to change states. Aside from this, stateful components can store the information about the state changes performed in the past, happening at the moment, or planned for future.
What is the difference between Props and State?
This question is important because, as you probably know, the line between the two is blurry. Specifically, the state of a component can become its child component’s props. Still, a blurry line is a line and a hirable ReactJS developer needs to know how to see it. Here are the key points of distinction:
| States are: | Props are: |
| Mutable | Immutable |
| Slower | Faster |
| Used as “places” where data comes from | Used to pass data from top-level components |
What are Higher Order Components? What are the examples of HOCs?
Including a HOC-related question is a must for a ReactJS developer interview because higher order components have become inherent to React development. So what exactly can you ask about?
Sure, asking your candidate to actually implement a basic HOC pattern seems like the best way of checking how familiar they are with the concept. The only problem is a task of this sort will probably take a lot of time. For this reason, it might be a better idea to ask your React developer to provide you with the definition and an example of a HOC.
Namely, higher-order components are React components that include other components. One way to implement a higher order component is a function that takes another component and generates a container for it. In this respect, higher order components are conceptually similar to higher order functions.
As far as examples go, Redux’s connect function seems like one of the most widely known HOCs.
Are there any widely-known problems with forms in ReactJS?
In the case of HTML forms, DOM stores the value of <input> or <button> elements (or other form elements, for that matter). The state of these elements gets updated every time the element receives user input.
Due to these updates, React developers need to make sure their components are in always synch with the state of the view. Failing to do so will lead to situations where React “doesn’t know” about the changes of the view, should a change occur.
How are events in React different from the events on DOM elements?
Handling DOM events with React is different as compared to doing it with vanilla JavaScript’s DOM API. First, there are purely syntactic differences like:
- the use of camelCase in React in contrast to the standard lowercase,
- passing functions as event handlers rather than strings.
Aside from these two, there are well-known gotchas that have a more direct impact of the way things are built with React. The two examples of such differences include:
- Preventing default behavior of an element. The DOM/JavaScript way to do this boils down to returning false in function that’s passed to the onclick attribute. The React way of doing the same thing is explicitly using the preventDefault() method.
- Adding event listeners. With standard DOM and JavaScript, you add event listeners to a DOM element after the element was created. In React, you do it when the DOM element is initially rendered.
Bottom line
Obviously, a React developer interview can possibly cover every aspect of the technology. Still, having a selection of questions that deal with the most basic aspects of React seems handy, doesn’t it?
If finding talented remote React.js developers has been a challenge, check out DedicatedTeams. Used by Bloomberg, Groupon, Bleacher Report and dozens of VC backed startups it’s the fastest way to start a remote dev team.
Comments are closed.