32 Reactjs Interview Questions and Answers For 2019: Prepared by Devteam - Space
32 Reactjs Interview Questions and Answers For 2019: Prepared by Devteam - Space
DevTeam.Space is a data-driven agile
software development platform
Successful businesses and entrepreneurs
rely on DevTeam.Space for their most
innovative projects
Avoid making a laundry list of non-essential skills for your perfect ReactJS developer. Instead, focus
on what your candidate will actually be doing day-to-day. Keep your requirements list as short as
possible. Cut anything they can do without or learn on the job.
Question 2: What is the purpose of the following code?
Requirement: Using CSS with React
render() {
let className = 'menu';
if (this.props.isActive) {
className += ' menu-active';
}
return <span className={className}>Menu</span>
}
Answer: This code adds a CSS class to a component by passing a string as the className prop.
Here the class depends on the component props or state which is common with ReactJS.
Question 3: Explain what a Javascript callback function is and provide a simple example.
Requirement: Basic Javascript skills
Answer: A callback function is a function that is called after another function has finished executing.
A callback function is passed to another function as an argument and is invoked after some
operation has been completed. For example:
function modifyArray(arr, callback) {
arr.push(100);
callback();
}
modifyArray(arr, function() {
Question 4: Briefly describe ReactJS in one or two sentences.
Requirement: Foundational ReactJS knowledge
Answer: ReactJS is an open-source Javascript library. It is designed for building dynamic single
page applications that require less coding than doing everything yourself in Javascript. Sometimes it
is called a framework, but that’s a question of terminology.
Question 5: What is ReactJS? How does it compare to other JavaScript frameworks?
Requirement: Foundational ReactJS knowledge
Answer: Here you are getting a feel for the candidate’s knowledge, ideas and opinions of what
React is, and how it fits into the JavaScript ecosystem. Some points to look out for:
Question 6: How would you learn about a new Javascript library?
Requirement: Learning on the job
Answer: Web development is changing all the time, and developers need to be able to learn
constantly. Here you are finding out how the candidate approaches the learning process. You want
to see that they have an idea of what information they will need and where to find it. For Javascript
libraries, that means looking up online tutorials and digging into the documentation.
Question 7: Describe a time you received feedback on a programming task. How did it help you
Question 8: A common type of problem we have to solve at this company is _____. How might
you think about finding a solution?
Requirement: Thinking like a programmer
Answer: In this question, the problem should be directly related to the work the candidate will
actually be doing day-to-day working for you. You aren’t looking for a perfect answer or even
necessarily a correct answer. Instead, listen to how they approach solving a problem, their ability to
break a problem down into parts, and if they can anticipate problems.
Limitations:
● Library, not a framework. It handles the UI only. You need to use other libraries for other
parts of your application
● No set way to structure applications, meaning you have to figure it out for yourself
● Its flexibility can easily let developers make poor choices
● JSX and inline templating can make the code quite complex, especially for novice
developers
● A different way of thinking and learning curve compared to other frameworks like Angular
Question 10: Explain what the Virtual DOM is in ReactJS and why it is necessary.
Requirement: Expert ReactJS knowledge
Answer: The Virtual DOM is one of the key concepts in React. A good candidate should be able to
explain the problems with DOM manipulation and why the virtual DOM helps.
DOM (Document Object Model) manipulation is how web applications update the HTML on a
webpage to make it dynamic and interactive. However, updating the DOM is slow and most
JavaScript frameworks update it more than they need to. Usually, by updating the entire DOM every
time a small change is made on a page.
React tries to reduce this waste by only updating the parts of the DOM that are actually updated. To
do this, React keeps track of a corresponding lightweight ‘Virtual DOM Object’ that can be updated
and checked for changes much faster than the real DOM.
React uses Virtual DOM snapshots to work out exactly which parts of a page need updating, and
updates only those in the real DOM rather than creating a new DOM. By using a virtual DOM, web
applications can be made much faster and more efficient
Question 11: What is JSX? How does it relate to ReactJS? Give a quick example.
Requirement: Expert ReactJS knowledge
Answer: JSX (JavaScript XML) is a preprocessor that allows you to include XML syntax in your
JavaScript. Its basic function is to make code more intuitive and easier to read. The React library
realizes that often the JavaScript and HTML are strongly related, and having them in separate HTML
and JavaScript files makes things confusing. Here are some examples of some JSX code:
render() {
return (
<div>
<h1>”Hello, World!”</h1>
</div>
);
}
It isn’t mandatory to use JSX with React, but it makes a lot of sense to do so.
Question 12: What are components in React?
Requirement: Expert ReactJS knowledge
Answer: ReactJS is component-based. That means that components make up the building blocks of
a ReactJS application by splitting the UI up into many separate, reusable pieces. Components can
be thought of like JavaScript functions. They accept inputs called props and return React elements
that describe what should be presented to the user.
Question 13: What do the following two ReactJS code segments do?
Requirement: Expert ReactJS knowledge
1:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
2:
Answer: Both of the above d efine components in React. The first is a f unctional component and the
second uses an E S6 class to define a component. However, from the perspective of ReactJS, the
two above components are exactly equivalent.
Question 14: What does render() do?
Requirement: Expert ReactJS knowledge
Answer: Every React component has a render() function. Render() returns exactly one React element
that represents a native DOM component. Multiple HTML elements must be grouped inside one tag,
for example, <group>.
Question 15: What’s your experience with the Flux architecture pattern?
Requirement: Experience using Flux architecture
Answer: Many ReactJS applications use Flux architecture rather than MVC. Its key feature is that it
enforces unidirectional data flow. The three major parts of a flux application are the:
1. Dispatcher
2. Stores
3. View (React components)
Question 16: What’s your experience with the Redux library?
Requirement: Experience using libraries you use
Answer: Redux is a state management library commonly used with React. You’re checking if your
candidate can talk about using Redux (or another library you use) to build testable applications that
can run across different development environments with predictable behavior.
1. Single source of truth
2. State is read-only
3. Changes are made with Pure functions
Question 17: What are some testing tools you would for unit testing in a ReactJS application?
Requirement: Unit testing UI components
Question 19: Can you describe the React Component lifecycle? When you should make an
asynchronous call?
Requirement: React component lifecycle. React 16/17 breaking changes.
Answer:
The usual component lifecycle looks like this:
1. Mounting
a. constructor
b. componentWillMount (should be mentioned, that in React 16/17 this hook is
deprecated and replaced by getDerivedStateFromProps)
c. render
d. componentDidMount
2. Updating
e. componentWillUpdate (in React 16/17 it was replaced by getDerivedStateFromProps)
f. shouldComponentUpdate
g. render
h. getSnapshotBeforeUpdate
i. componentDidUpdate
3. Unmounting
j. componentWillUnmount
Before React 16 it was ok to make a call in componentWillMount. But now that componentWillMount
has become deprecated the earliest hook for asynchronous call is componentDidMount. It’s also ok
to make calls from ‘componentDidUpdate’.
Question 20: What React patterns do you know? Can you describe what is HOC or Render prop?
Requirements: React patterns and app architecture
Answer: There are a lot of patterns for React, such as:
HOC is the acronym of High Order Component, which is very similar to High Order Function. It’s a
function takes a component and returns new component with some changes. For example, Redux
connect functions is the HOC, which takes a component and returns a component with Redux State
and Actions.
Render Prop is the pattern for creating components with “render callback”. Usually, it is used for the
same purpose as HOC. For example, it is used by React-Router 4 and Context API.
Question 21: Do you have any experience with React 16 Context API? What problems does it
solve?
Question 22: What is React Portal and React Fragment? What problems do they solve?
Requirements: React Portal and React Fragment.
Answer: Portals provide a first-class way to render children into a DOM node that exists outside the
DOM hierarchy of the parent component. For example, it can simplify Modal window rendering or
changing information inside <head></head> tags.
React Fragments are for grouping a list of children without adding extra nodes to the DOM. Because
React forces us to return only one object from render, we should wrap children into div or a similar
container tag. Sometimes it’s simpler to return several tags without a container to implement some
features.
Question 23: What is React Reconciliation? How do you avoid performance issues?
Requirements: React rendering algorithm
Answer: Reconciliation is the process that React uses to efficiently update the DOM. It does this by
only updating the parts that need it. At a single point in time, the render() function will create a tree
of React elements. On the next state or props update, that render() function will return a different
tree of React elements. React then needs to figure out how to efficiently update the UI to match the
most recent tree. The process of figuring this out is reconciliation.
As for React Loadable is a small library for wrapping components into bundles. It provides nice
features such as placeholders for “Loading” and “Error” components and flash delay. When a
component is wrapped, Webpack will move it into a new bundle.
Open-Ended Questions
Once you’ve established that your developer is an expert in ReactJS, you should continue the
interview by asking some messy and open-ended questions to spark a discussion. Tailor these
questions to fit your own job requirements and don’t be afraid to ask follow up questions.
Question 26: If you could use whatever tools you like to build our ____ application, what would
you use?
Requirement: Design skills, understanding requirements
Answer: In this question, you are getting a feel for the type of developer you are talking to and how
they like to code. You are especially looking for developers that try to understand the requirements
first. It’s a big red flag if a developer gives a list of libraries and tools without understanding the task.
Question 27: How are you involved in the ReactJS community?
Requirement: Passion for web development
Answer: This is a popular question for coding interviews because community and open source
involvements are clear indicators of a passionate developer.
Question 28: Describe a time you fixed an error in a web application. How did you approach the
problem? What debugging tools did you use? What did you learn from this experience?
Requirement: Debugging, Breaking down a problem into parts
Debugging is one of the key skills for any web developer. However, the real skill is in breaking the
problem down in a practical way rather than finding small errors in code snippets. Debugging often
takes hours or even days, so you don’t have time in an interview setting. Asking these questions will
give you an idea of how your candidate approaches errors and bugs.
Question 29: What’s the most important thing to look for or check when reviewing another team
member’s code?
Requirement: Mentoring less experienced developers, Leadership skills
Answer: Here you’re checking for analysis skills, knowledge of mistakes that less experienced
developers make, keeping in mind the larger project and attention to detail.
A good answer might mention code functionality, readability and style conventions, security flaws
that could lead to system vulnerabilities, simplicity, regulatory requirements, or resource
optimization.
Question 30: What tools & practices do you consider necessary for Continuous Integration and
Delivery for a web application using ReactJS?
Requirement: DevOps systems design, Maintaining and upgrading applications
Example Answer: One example for a React applications is create-react-app. It provides a lot of
features for building. It also good to separate config files for development and production.
As for deployment, it depends what hosting we are using. For example, for Firebase there is nothing
complicated: usually we run build script and run firebase deployment script. Same for github pages,
heroku, netlify.
For deployment to basic hosting with client-side rendering they might mention nginx and node
server.
Question 31: What is your favorite method to fill a React Component with CSS? Do you have an
● by className
● by inline styles
● CSS-in-JS
● 3rd party libraries for styling components such as StyledComponents, Radium, CssModules,
etc.
Question 32: What is the purpose of React Refs? Can you describe a problem you can solve by
using it?
Requirement: React DOM interactions.
Answer: Refs is the method to access a DOM node or React component inside a parent component.
A common problem it solves is to focus input or get child component’s fields. It’s better to use refs
as little as possible.
Summary
Hiring the right people for your development team is critical to the success of your project.
Remember that you should not be aiming to hire the perfect Java developer, but rather the right
person for the job at hand.
With the help of this information and sample interview questions on Java, you can ensure that the
hiring process goes smoothly and successfully – allowing you to design hire a great programming
team to get your project completed on time and on budget.
Finally, you can simply print out this ready-to-use cheat sheet of questions and answers and bring it
with you to the interview. your candidates.
Happy Hiring!
Successful Businesses and Entrepreneurs
Rely on DevTeam.Space
for Their Most Innovative Projects
GET STARTED >
Tell us about your challenge & get a free strategy session