React Interview Questions

I have been doing interviews for senior ReactJS developers for almost a year. Right now, when I am preparing for an interview myself, I realised that knowing when someone gives you a great answer and giving the answer yourself is not the same :)

Normally, I wouldn’t be allowed to share the interview questions I use at work but since I am reusing my original private questions, I don’t violate any rules and hope someone can benefit from it.

How are the questions structured? We have a few categories: JavaScript, ES6+, React, Redux, Advanced React and some general development questions. Each set includes a blocker, should know and good to know questions. As you may have guessed the blocker will immediately make you fail the interview. In general, you should reach 85% of all available points.

Basic JavaScript Questions

What is the difference between == and ===?

The usual answer would be one compares only the values while the other also compares the type. In this case, follow up question would be: Why null == undefined is true? As you can guess their values will never be equal.

A good answer is that == runs the loose equality check while === also compares the types. The loose equality check looks at the type on both sides and based on the types it decides what to do. The specifications states that if both sides of the comparison are null and undefined just return true.

So, it may just return true like in the case of null with undefined or it may try to convert one or the other side to the same type and compare their values depending on what is specified for a certain scenario.

What are closures and lexical scope?

A closure is when a function is able to remember and access its lexical scope even when that function is executed outside of that scope. A good example for closures is currying, a common accepted answer is also responding that an inner function returned by an outer function has access to its outer functions variables even after the outer function was called. Lexical scope is the scope model used by JavaScript which compared to dynamic scoping enables a lot of cool features. If someone also explains lexing time and goes into hoisting it is a big bonus.

What is data mutation and how to prevent it?

This is a bit tricky question as there are multiple correct answers and approaches. What we look for is understanding that arrays and objects can be passed around and since they are references, we are changing the original array or object. This leads to side effects and often to unwanted behaviour. The preferred way is never to mutate objects or arrays and when modifying, always create and return a new copy. We can take advantage of the spread operator, object.assign or libraries like ImmutableJS. Mentioning array.slice vs splice is a plus.

What is hoisting?

A common answer is: hoisting is a mechanism which moves all declarations to the top of the execution scope. A good answer is understanding that JavaScript compiles your code before execution. When the compiler enters an execution context, it will start lexing (splitting your code) and analysing the code while creating a list out of the declarations it finds. Each time the compiler encounters a declaration, it will create a binding to it and each time it encounters an assignment or evaluation it will ask the current scope for the binding, if it can’t find the binding, it will go up until it reaches the global scope. If you have strict mode on, you will get an error and if you use the good old es5 it will create a new binding for you. This is why, you are able to assign to a variable which wasn’t declared before. Anyway, after running through some steps, it will generate some compiled code which can be then executed :).

Explain inheritance in JavaScript.

JavaScript is a prototype based language and uses prototypal inheritance instead of the more common class inheritance, even though in ES6+ we use classes, they are just a syntactical sugar and they are still based on prototypes.

Prototypal inheritance is based on the prototype chain, in a simple example every object, objects instance, has a prototype. We can access it for instance trough the __proto__ property. This basically returns the objects parent. This way you can climb up the prototypal chain until you reach the top-level parent (object in this case) where the prototype is set to null. The advantage of the chain is, that if we call a property of an object, if it can’t be found on the object, JavaScript will automatically look for the property on the prototype, if it can’t find it on the prototype. It will look at the prototype of the prototype and so on until it reaches the top level and errors out.

What do you understand under asynchronous code in JS?

Synchronous code is code which is executed step by step, if we have a long running task we need to wait until it finishes executing before moving further and this basically blocks all other tasks if we don’t have multithreading. In case of a 5s long AJAX call, we would block the browser for 5 seconds unable to do anything. This is solved by asynchronous code where tasks can be executed in a non-blocking way. This is ensured by the event loop and uses the call stack and callback queue to provide asynchronous behaviour. In simple terms, we can register asynchronous tasks with the event loop to be executed in the future. JavaScript provides a few ways to achieve asynchronous code: via promises, async/await or generators.

ES6+ Questions

What is the difference between array.map and array.forEach?

This simple question apparently causes a lot of issue :) but the answer is very simple. While forEach executes a function for each element with the element as the function argument, map does almost the same but it returns a new array with the results of the function replacing the item in each step. The new array is of the same size as the original array.

What is the difference between a function declaration and an arrow function?

Apart from a difference in hoisting the main difference is that a function declaration is bound to its execution context while an arrow function is bound to its lexical context. E.g. the difference is how this is handled and it is especially useful in react components as we don’t need to bind context anymore when passing down event handlers for instance.

What is the difference between const, let and var?

var is global or function scoped while let and const are block scoped. Let and const can’t be redeclared although let can be reassigned. Saying that const should always be preferred where possible is a big plus as JavaScript moves towards functional programming and we don’t want to change/re-asign existing variables.

What are asynchronous iterators?

This is only to see if developers are up to date with latest ES features. Asynchronous iterators make it possible to use asynchronous code in loops for instance we can now await in a for of loop.

React Questions

Explain the Virtual DOM

Virtual Dom is a concept where a virtual representation of the DOM is kept in memory and synced with the real DOM, in our case by ReactDOM. Thanks to the reconciliation algorithm, this enables react to update the DOM only where needed which has a huge performance benefit.

What are lifecycle methods?

Each react component has several methods which enable the developer to hook into a component’s lifecycle. React provides methods for hooking into mounting, un-mounting, updating or error handling states off a component. Such methods are for instance componentDidMount, render, componentDidCatch etc.

Name 3 ways to create a component in React and its differences.

There are 3 main ways of creating a component. Extending from the Component class, extending from the PureComponent class or using a stateless function as component. The main difference is that we don’t have access to lifecycle methods in a stateless function nor to the state. PureComponent also implements componentShouldUpdate by default and provides a shallow compare for its props and state preventing unnecessary re-renders.

What is a higher order component?

It is a function which accepts a component as its argument and returns a new, enhanced component. HOC is a pattern used for sharing and reusing component logic.

What is the difference between controlled and uncontrolled components?

With controlled components, data are handled by React while in uncontrolled components the data is in the regular DOM and we can access it using refs.

Redux

What are actions and action creators?

An action is an object with a mandatory type field, it usually has also a payload which are the data related to the action. An action creator is a function which returns an action.

What is a reducer?

A reducer is a pure function which takes the current state and an action and returns the next state.

What is a container component?

Containers are components which usually provide data and logic and are not concerned with rendering the view. Containers are in most cases connected components and get the data from the state and pass down actions bound to dispatch.

What are selectors? Why would you use reselect or a memoization library?

Selectors are functions which accept the state and return a portion of it while applying calculations, transformations, mappings, filtering etc. This way the logic of how to retrieve data for a specific view is encapsulated in a selector. Since many of the mentioned operations are expensive, when calling the selector again without state change, you want to skip the expensive operations as they will return the same results and hence the usage of reselect. Reselect will return the results from the Cashe in case arguments didn’t change.

What are approaches of handling side effects in redux?

Side effects are mostly async calls and are handled by redux thunks or redux sagas.

Advanced React

How would you optimise the performance of a React application?

The most expensive task in a React app is the update of the DOM. The basic optimisation is to reduce how many times a component re-renders. This can be achieved by using componentShouldUpdate, using PureComponent or memoization libraries like reselect. Reducing the size of the final JS file also helps improving performance and we can use dynamic imports and chunks for this.

Do you know what the reconciliation algorithm is?

It is the algorithm responsible for figuring out what changed between re-renders and how to update the actual DOM. It is basically a diffing algorithm. The latest addition of improvements on the core algorithm is called React Fiber.

Do you know the Context API?

The context api is a feature which allows sharing data without passing it down in the component tree. With the latest API, in some cases it is a nice replacement for state management libraries. Many libraries use the api including Redux, styled components theme provider and some other UI libraries.

How do you handle method binding in components?

There are more ways, we can bind the method in render, in componentDidMount or use the preferred way, which are arrow functions.

What are new features in React 16+?

React introduced Fiber, Portals, Error boundaries, the new Context API and deprecated for instance componentWillUpdate. The latest addition will be Hooks, which are soon to come.

General Questions

What is Webpack?

Webpack in general is a module bundler, thanks to many plugins it provides although a lot more and it can be used to run tasks, clean build directories, check linting, handle typescript support, increase performance, provide chunking and a lot more.

How would you structure a React application?

This is an open question with many possible answers. The basic structure is usually module or feature based. We usually differentiate between UI and logic. There are many approaches to structure UI components with the most popular being atomic design. Data and business heavy applications use a more domain driven approach. The ideal combination for larger applications is having the domain logic separate and having the UI logic in an atomic structure. All this can be combined in features which are rendered on pages.

Explain concepts of functional programming.

Basic concepts are pure functions, side effects, data mutation and declarative over imperative. On top of that currying, compose and function composition are important concepts. Knowledge of libraries like RamdaJS provide useful utilities build applications in a more functional way. Functions being a first class citizen make it possible for JS to be really functional is important as well.

Do you know Lerna or what a monorepo is?

Lerna is a tool used to handle mono repositories and package dependancies. Essentially, instead of having a large monolithic application, we break it down into small independent packages kept in one repository.

What is a REST API?

A very difficult question as developers can’t really agree on a concise answer :)

Important to know is, that a REST api provides a formal way of communicating with your back-end and sharing resources. It is based on the usage of http methods which indicate the intentions of the api call. These are POST, GET, PUT, PATCH and DELETE. REST is a standard and it enforces certain best practices on how to structure your urls, what kind of response format to send, how to handle security or use stateless communication. Common response formats are HYDRA or HAL and the most common authentication approach is via JWT tokens. An important concept for REST is also HATEOAS which is an approach on providing hypermedia information.

Explain WebSockets?

WebSockets is a protocol which provides full duplex communication in a single connection.

Explain Flexbox and its benefits

Flexbox is a layout-ing method which solves many previous problems with handling layouts in CSS. It eliminates the need for different GRID libraries and using floats to position blocks on the site. It has a very intuitive api and gives a lot more control and flexibility.

This was it, hope it will help someone prepare for his next interview.

There are two advices to complete the questions:

1. Don’t be arrogant and never argue with the interviewer
2. If you don’t know something, say it. It is a lot better than saying something which is not correct. Every interviewer will pick on that immediately and start asking more and more questions. This will get you nervous and you will forget even what you really know :)