Low Orbit Flux Logo 2 F

React JS Interview Questions

Finding a good front end developer in any framework can be difficult. For one, it’s notoriously difficult to properly assess a developer’s skill set in a matter of a few hours- or even over an hour or less over video in our remote-working days- let alone make sure that there’s a good culture fit. Tests can be useful, but they really determine whether the developer happened to know the niche task given to him or her, providing no insight into his or her work ethic, problem solving skills, or interpersonal communication abilities.

Open ended questions provide your interview candidates with the opportunity to show off both his or her communication and understanding skills as well as technical knowledge- and, even more importantly, the ability to apply the right technical tool to the job at hand. Here are 10 questions to ask a prospective React JS developer.

What is an Element and how is it different from a Component?

This could be a trap for someone who’s not very familiar with React, so throwing this one out early could help winnow out someone over his or her head. Simply put, an element is an object corresponding to a traditional HTML element that React will manipulate and display. A component is more analogous to a class or method/function; it will have properties (props) as input and will return a JSX tree as an output. (More on JSX later- a successful candidate will probably mention this and you can combine the two.)

What is JSX?

JSX Stands for Javascript XML- it is the latest in the trend of a platform defining its own markup language or sublanguage. It is an attempt to combine the structure of HTML with the fluency of traditional Javascript.

Can you define Props and States?

Props are values passed into components. They are single values, though they may be objects that themselves contain arrays or more complex values, and are passed into components using a special naming convention derived from the principles of HTML tag attributes. They are used when passing data downstream to a child from a parent component. Components watch these properties for changes in value to rerender themselves; props might also just be used to pass data from a parent to a child component for initialization values.

States are similar- they are values defined within the component that change within the lifetime of the component. They are also monitored for changes and the component can react to that, although given that they’re within the component they’re not directly passed to child components. Both props and states are simple JavaScript objects and both hold values that (can) influence the rendering of components, look for candidates to point out that states are managed within a component and props are used to send values between components.

What Are Pure Components?

This is kind of a double question, because a knowledgeable candidate will have to also explain a little more about components if he or she didn’t already for the first question. Pure components take care of calling the shouldComponentUpdate method; hopefully your interviewee will go on to explain that a traditional component won’t monitor prop or state changes, whereas a PureComponent will; when one of those changes, a PureComponent will update its rendering. If you’d like to probe a bit further, you might ask why someone would use a regular component when pure components exist? Look for him or her to discuss the fact that PureComponent is doing a shallow comparison, and the developer might need to write extra logic to react to slightly more complicated situations, and that there are (very) minor performance considerations when always doing a shallow copy.

What is React Fiber, and why is it used?

Fiber is the new engine of React in version 1.6. It is intended to increase integration with things like gestures, animation, and control (pause, abort, reuse) of work. The most popular and well-known improvement is incremental rendering, in which rendering work can be split into multiple frames.

What are synthetic events in React?

A synthetic event is a wrapper around browser’s build-in event, making it cross browser. It’s called the same way a traditional event is, including built-in methods like preventDefault, so it’s easy for developers to pick this up without having to consider the browser environment.

Describe key prop and when/how are they used?

Key props are used by React to monitory when items in an array have changed or are added or removed. When dealing with data-driven applications, an object’s ID field is often used as a key prop, since it uniquely identifies an object in a collection. If you want to ask a bit of trick question, see if the candidate knows what to use for a key if assignable and unique IDs are not available. A good answer: anything that can distinguish one element in a collection from another, such as an array index, although items that are reordered can throw a wrench into this backup plan.

Describe stateful and stateless components

Stateless components are created with a function or a class and its behavior is independent of its state- effectively, it doesn’t have state. If a component needs to react to the lifecycle flow, a stateless component isn’t the best choice, but if not, stateless components require less code to write, test, debug, and maintain. Stateful components are always class components and initialize their state in the constructor (which may also depend on props from other components). These are used when the state of the component changes over its life and the component needs to react to those changes.

What are the some advantages of ReactJS?

This is a great opportunity for the interviewee to display his or her knowledge of React rather than giving book answers. It’s also a great chance for a higher level candidate to show why he or she choose for or against React in a project and illustrate problem solving, design, and leadership skills. Some of the highlights you can look for:

How about some Disadvantages:

What is Babel?

Babel is a JavaScript compiler, a tool that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things you’re hoping to hear thatBabel can do for you: