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
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Whether you’re an entrepreneur, a project manager in a large enterprise, or a CTO, you are well
aware that the success of your project rests on your ability to find top developers.
In this guide, you’ll find example interview questions and answers you can refer to when seeking a
new ReactJS developer to make your dynamic user interfaces come to life. You’ll also get some
practical advice on how to use these questions to reliably identify the best developers for the job.
First Things First: Select Your Job Requirements
ReactJS is a flexible JavaScript library that can be used in all different kinds of applications and
alongside other web technologies. To find a ReactJS that’s a great fit for your project, you need to
get clear on what your job requirements are.
Think about the type of application you are developing, and what technical skills are critical to its
success. You also need to think of the softer skills that a candidate needs to work well with the rest
of your team.
Some example ReactJS job requirements include:
● Essential web development skills – E.g. HTML, Javascript
● ReactJS-specific skills – E.g. JSX
● Library/toolkit experience – E.g. Redux/MobX
● Design skills – Building scalable applications, using the Flux architecture
● Communication skills – Discussing problems and constraints with your clients
● Being a self-starter – If you don’t want to do any hand-holding
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.
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
With clearly stated requirements, you’ll be able to choose the right ReactJS coding interview
questions and have a much better idea of what kinds of responses you are looking for.
In this guide, we categorize the questions based on the level of expertise you’re looking for. Junior,
Mid-level, and Senior. If you’re unsure exactly which one you need, take a look at the different
sections for a summary of what you can expect from each.
● Junior Developer Interview Questions
● Mid-level Developer Interview Questions
● Senior Developer Interview Questions
ReactJS Junior Interview Questions
Junior developers have the least experience and demand the lowest salary. It’s important to note
before hiring a junior that they need to work under the guidance of more experienced developers.
Common Skill Requirements for Junior Java Developers
● Basic HTML, CSS and Javascript skills
● Foundational ReactJS knowledge
● Learning on the job
● Following instructions and receiving feedback
● Thinking like a programmer
Example Java Basic Interview Questions and Answers
Note: Important keywords are underlined in the answers. Bonus points if the candidate mentions
them!
Question 1: Write an example of a simple HTML document with some header information and
some page content.
Requirement: Basic HTML skills
Answer: HTML documents are different, but they follow a basic structure of head and body. The
different sections are marked with tags such as: DOCTYPE, html, head, title, meta, body, h1, p.
For example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="Page description">
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
</head>
<body>
<h1>Interview Example Web Page</h1>
<p>Some content goes here</p>
</body>
</html>
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();
}
var arr = [1, 2, 3, 4, 5];
modifyArray(arr, function() {
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
console.log("array has been modified", arr);
});
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:
● React is an open-source JavaScript library maintained by Facebook
● It’s designed for building dynamic and interactive UIs (user interfaces) for web and mobile
applications
● It is used to help you build UI components
● Sometimes seen as the ‘View’ in the ‘Model-View-Controller’ (MVC) architecture.
● This means it is a relatively small framework (compared to, say, Angular, which takes care of
the whole front-end) and can be used easily with other libraries and integrated into many
applications
● React isn’t as opinionated about an application’s architecture as other frameworks like
Angular and Vue.js
● Very strong community with many supporting tools and packages
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
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
become a better programmer?
Requirement: Following instructions and receiving feedback
Answer: This is a typical open-ended question. The candidate should demonstrate they can accept,
understand and act on feedback.
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.
Mid-Level ReactJS Developer Interview Questions
enior developer section for the React JS advanced interview questions.
Skip to the S
Mid-level developers are the workhorses of the software development world. They are fairly
experienced and you can rely on them to execute routine tasks with skill and efficiency. They can
also mentor junior developers.
However, if you need a developer with high-level design skills to lead your project, you might want
to skip down to the expert-level ReactJS programming interview questions.
Note: Important keywords are underlined in the answers. Look out for them in interviews!
Question 9: List some advantages and limitations of ReactJS?
Requirement: Expert ReactJS knowledge
Answer:
Advantages:
● Free and Open Source
● Highly adaptable
● Virtual DOM makes it extremely efficient
● JSX increases code reliability and makes mixing HTML and JavaScript much easier
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
● Makes UI testing easier
● Developer tools such as the React.js chrome extension for debugging
● More SEO friendly that some other JavaScript frameworks
● Large supporting community
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:
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
const element = <h1>Hello, world!</h1>;
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:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
}
}
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
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Answer: Unit testing is a technique to test that isolated segments of code are functioning properly.
Some tools for testing ReactJS applications include Enzyme, Jest, react-testing-library, React, unit,
Skin-deep, Unexpected-react.
Question 18: What is the children prop?
Requirement: Understanding JSX and composition.
Answer: A special prop that takes data between tags. For example:
<Header>Hello world</Header>
props.children in component Header will be equal to “Hello world”.
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’.
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Senior ReactJS Developer Interview Questions
Now for the most difficult interview questions and answers for experienced ReactJS developers.
These are for finding the developers that can design and build you a world-class React application.
Skill Requirements for Senior ReactJS Developers
● Expert ReactJS knowledge
● Flux architecture
● Designing for specific requirements (e.g. security, scalability)
● Asynchronous programming
● Maintaining and upgrading applications
● Experience in other JavaScript frameworks and libraries (e.g. Node JS)
● Efficient programming and clean code
● Debugging
● End-to-end and unit testing
● Leadership skills
● Clear communication skills
● Mentoring less experienced developers
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:
● High Order Component (HOC)
● Render Prop
● Function as children
● Container and Presentational components
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?
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Requirements: React Context API
Answer: Context API provides a way to pass data through the component tree without having to
pass props down manually at every level. It can be used to share global data (such as user, theme or
any other information) between child components.
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.
To avoid performance issues we should:
● Add ‘key’ prop
● Use PureComponent with React.memo()
● Memoize functions (reselect, for example).
Question 24: What is the ‘PropTypes’ library?
Requirements: PropType library, data validation
Answer: PropTypes is the type-checking addition to React Library, which exports a range of
validators to make sure the data component receive is valid. Using it is a good idea, because it
reduces the number of bugs and makes component self-documented.
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Question 25: Do you have any experience in code splitting with React? Can you describe how a
bundle can be split into smaller chunks?
Requirements: Webpack bundling, React.lazy or React Loadable
Answer: React has tools to avoid large bundle sizes. You can use React Loadable, because of its
simplicity, but React 16.6 also has solutions such as React Lazy.
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.
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Answer: In the candidate’s response you should look out for things like:
● A measured, scientific approach
● Breaking down the problem into parts
● Finding out how to reproduce the error
● Expressing and then testing assumptions
● Looking at stack traces
● Getting someone else to help/take a look
● Searching the internet for others that have had the same problem
● Writing tests to check if the bug returns
● Checking the rest of the code for similar errors
● Turn problems into learning experiences
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
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
experience with CSS-In-JS libraries?
Requirement: React component styling
Answer: There are several options to style components:
● 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!
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
Hear From DevTeam.Space Clients
DevTeam.Space team is proactive, drawing on operating experience to understand not only your
vision but also its purpose; they are skilled, making the right judgment calls and iterating quickly;
and they get customer service, providing honest counsel on cost-benefit and real-time process
transparency. I highly recommend DTS and look forward to working with them again!
Investment Fund / Website development
NIC POULOS – Bowery Capital
DevTeam.Space has been a great support to us. We needed help with frontend specific projects for
a big release. They came on board, with almost no time taken in ramping up with our code base
and were able to deliver on time! For fast, effective service, contact DevTeam.Space.
Consumer Services / Frontend
RAHUL THATHOO – MyTime
We had 5 projects and 3 different development teams across multiple tech stacks. One dashboard
to navigate all the projects, two project managers, daily updates directly from developers, blockers
tracking, and daily stand-up calls have created a productive atmosphere and helped us to move
much quicker. If you are looking for high-end software outsourcing services - look no further.
Property management / Backend Infrastructure / Data
JASON JOU – SenStay
Working with DevTeam.Space was a positive and professional experience from the start. They had
all the tools in place to support Agile Scrum project management, communicated daily via the
dashboard, delivered their Sprints on time, and stayed on top of project blockers. I look forward to
working with them again!
Fintech / Backend / Frontend
TONY AMOS - Principis Capital
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
● [email protected] ● 415-570-7043 ● https://devteam.space
© DevTeam.Space. Confidential and proprietary
