Well Paid Geek

React and Redux

Interview Questions and
Answers
Introduction 2

Question 1: Explain what React is and what is good about it. 3

Question 2: What is a higher order component, and why are they useful? 6

Question 3: How would you create a higher order component in react? 8

Question 4: Explain the difference between Stateful and Stateless components 9

Question 5: What is JSX? 10

Question 6: What is Redux, and what is the point in using it? 11

Question 7: How would you handle asynchronous actions in Redux? 12

Question 8: What is a pure function? Why must a Redux reducer be a pure function? 13
 http://wellpaidgeek.com/

Introduction
If you’ve taken the time to learn React and Redux and now you’re asking yourself, “Am I job
ready?”, then this ebook is for you.

This book contains 8 interview questions, each of which I have either been asked when
interviewed for a React / Redux developer position, or I have asked candidates when I was the
one conducting an interview.

If you can answer these questions to a high standard, then you will pass the React / Redux
portion of a JavaScript / Frontend Developer interview with flying colours. I go really deep with
the answers. So much so that you won’t just be answering the question but also really showing
off your knowledge in a way which will blow other candidates out of the water.

This book doesn’t just give you the questions and stop there.

For each question I will identify what the interviewer is trying to find out from the question. Why
are they asking that question? You see, when interviewers ask a question, there’s always a
number of things they are trying to determine. For example, is the candidate aware of x? How
deep is his knowledge of y? How experienced is he at evaluating technologies in terms of
strengths / weaknesses? Knowing what the interviewer wants from you is a major key to
success in interviews. Many otherwise qualified candidates fail because they don’t get the key
points across when answering a question.

Finally, I will give you the best possible answer for each question.

This way you’ll be fully prepared for all React / Redux questions, given you have a strong
knowledge of why questions are being asked and how to answer them to perfection.

2
 http://wellpaidgeek.com/

Question 1: Explain what React is and what is good

about it.
What the interviewer wants to know

This question has two parts.

They of course want to know that you at least know what React is. If you don’t even know this
and React skills are a job requirement, they can safely terminate the interview here. The first
part of the question actually goes slightly deeper than that, though. It’s not just a binary he
knows or doesn’t know React. The quality and depth of your answer points to the depth of your
knowledge about React, but also your overall technical experience. This is because less
experienced developers will give answers with less depth than more experienced developers.

The second part of the question asks you what is good about React. It seems simple, but it will
catch a lot of less experienced developers out. What the interviewer actually wants to know here
is how good you are at evaluating technologies. Many people interviewed and asked this
question will just say, “React is good, everyone uses it, it makes UI easy”, but they seem to
have no idea why. This smacks of inexperience. They clearly like and use it because it’s in
vogue, not because they believe it’s the best tool for the job based, on their knowledge and
experience.

Answer

React is a JavaScript view library, created by Facebook, used to create user interfaces. It allows
for the use of XML directly within JavaScript code via JSX and enables developers to create
reusable UI components which are able to encapsulate their own state. Components are the
building block of a UI application, and can be combined to create other components.

React gets its name from the fact it allows the UI to ‘react’ to changes in an application’s state,
since all React components are representations of data they have either passed in via props or
in their own internal state. If the system state changes, the UI changes accordingly. This is
because what a React component renders is a result of applying data to the view logic
contained within the component.

In addition to this, React uses a virtual dom in order to optimize UI rendering, thereby mitigating
speed concerns that can come with direct DOM manipulation, and since React handles DOM
manipulation for you, you don’t have to worry too much about cross browser differences that
occur when manipulating the DOM directly.

The following is what makes react good:

3
 http://wellpaidgeek.com/

Reusability: Creating reusable components is very efficient. Reusability is a core software

engineering principle designed to save effort as it stops people reinventing the wheel.
Simplicity: React does one thing and does it well. Unlike other frameworks that are complete
MVC solutions (think Angular), React is purely a view library. This keeps it small and simple to
use, as it isn’t cluttered with a large number of features. It also allows development teams to
build their frontend stack piece by piece instead of just using a single ‘one size fits all’
framework that handles everything.
Testability: Libraries that require the user to directly manipulate the DOM (think JQuery) tend to
be harder to test, as you need to mock the DOM in some way. Since you don’t directly
manipulate the DOM with React, testing is easier. React’s paradigm of having a data set (props,
and also state) and having a set output (the rendered component) for that input also lends itself
to ease of unit testing, as it’s fairly simple to assert that for a set of props you get a certain
React element rendered. The fact that React enables the development of small components
also aids testability, as it allows for small units of code (the component) that are individually
easy to test, as testing smaller units of code is always easy compared to testing large,
monolithic units of code.
JSX is nice to work with: JSX means you get to work with code which looks like markup,
instead of say, calling some functions which generate markup. Working directly with code that
looks like markup is easier for developers, as it involves less abstraction for them (functions to
produce markup is an abstraction on top of markup, eg something that doesn’t look like markup
but produces it).
Lots of people use it: Since many people use React, including large successful companies,
this is an indication that there can’t be any major problems with it. This makes it a safe choice of
technology. In addition to this it also means there’s a strong community behind it, which is
always useful in terms of getting libraries or looking for answers to questions online. It’s
popularity also means it’s fairly easy to hire developers who already know React.
Great paradigm: The core idea of the UI being a series of components that choose how they
look based on the state in the application in a very declarative manner, and which dynamically
react to changes to that state, is just in a word, cool. It’s a great way of thinking about UI and so
provides a good developer experience.

Explanation of the answer

This question is simple on the surface, but it actually provides you with a great opportunity to
distinguish yourself from other candidates as it allows you to show off your depth of knowledge
and understanding, of not just React but software development in general. Combine this with an
impassioned delivery of the pros of React, and this answer will really help you to stand out.

Most candidates will just say, “It’s a component based view library, which allows you to write
markup within JavaScript. It’s good because it’s easy to use and everyone uses it. I really like it.
I just like using it”. This shows a lack of experience. This person may not have had non React
JavaScript experience, and so can’t tell what the benefits of it are. Someone who can tell you
why a library is good is far more likely to produce good code themselves, as this ability requires
an understanding of why things are good or bad.

4
 http://wellpaidgeek.com/

The “lots of people use it” part of the answer is interesting. If this is the main thrust of your
answer, it makes for a terrible answer. Paradoxically, if this is given as a small part of your
overall answer it’s great, as it shows pragmatism. Community support and being able to find
developers willing and able to work in a technology is a key factor in tech choices for someone
leading a tech team (or it should be!). This part of the answer recognises that.

5
 http://wellpaidgeek.com/

Question 2: What is a higher order component, and

why are they useful?
What the interviewer wants to know

On the surface, the interviewer wants to know that you know about higher order components
(duh!). Looking deeper, the interviewer is also probing for your depth of experience with React.
Beginners may well have unwittingly used higher order components, but don’t know what they
are. Knowledge of this suggests at least an intermediate React developer.

Asking why higher order components is useful is also testing your general software engineering
acumen, as the advantages of higher order components have their origins in good engineering
practices.

Answer

A higher order component is a function which takes a component as an argument and returns a
new component. The returned component is generally the result of adding some extra
functionality on top of the old component. You can think of a higher order component as taking
an existing component and wrapping it in new functionality. A good example of this is react-
redux’s connect function. You pass in a component, and it gets wrapped with functionality which
connects it to Redux’s store.

The main usefulness of higher order components lies in code reusability and the fact it allows us
to enhance components without modifying them.

The reusability comes from the fact that the functionality created by a higher order component
can be reused on many other components.

Allowing us to enhance components without modifying them is in fitting with the open / closed
principle in software engineering
(see https://en.wikipedia.org/wiki/Open%E2%80%93closed_principle).

Explanation of the answer

Explaining what a higher order component is is a no brainer. The wrapping metaphor really
shows them you ‘get it’.

Giving the example of the connect function is good, as it doesn’t click for some people that this
is actually a higher order component.

6
 http://wellpaidgeek.com/

The part of the answer talking about why higher order components are useful shows deeper
software engineering knowledge. Only mention the open closed principle if you know what it is,
otherwise you’ll like dumb when they ask you about it (they probably will if you mention it).

7
 http://wellpaidgeek.com/

Question 3: How would you create a higher order

component in react?
What the interviewer wants to know

That you aren’t just regurgitating some knowledge (say from a book like this for example!) about
higher order components. They find this out by testing that you actually know how to create a
higher order component yourself.

Answer

Create a function that takes a component as an argument.

This function will return a new component (either class or function based).

When this new component is rendered, it will return an instance of the passed in component.
This instance will be wrapped in some React element(s) which will enable the extra functionality
which the higher order component is designed to add.

The higher order component should ideally also pass through props to the wrapped component,
so all its props are able to be applied to it when using the resulting component.

An example would be a hideable higher order component, that hides the component based on a
prop.

It would render the wrapped component within a div that is shown or hidden based on the
appropriate prop, thus enhancing components with this hideable functionality.

Explanation of the answer

I don’t really have much to say about this. You just talk them through creating a higher order
component. An example makes this easier, as it’s easier to explain things in concrete terms as
opposed to in the abstract.

8
 http://wellpaidgeek.com/

Question 4: Explain the difference between Stateful

and Stateless components
What the interviewer wants to know

The interviewer wants to know how deep your React knowledge goes, and how much you know
about best practices. They may well also be probing for knowledge of functional programming
with this question.

Answer

Stateful components are components which make use of component state, stateless
components are components which don’t use component state.

Whereas function based components are always stateless, as it’s impossible for them to have
component state, a class based component can be either stateless or stateful. If a component is
not intended to have state, best practice would be to make it a function based component in
order to make this intent clear.

Function based components are often pure, in that their render function should always return
the same react element given the same props. This is not to be confused with components
which extend the React.PureComponent class. These are simply components which by default
will not re-render unless their state and props have changed.

Explanation of the answer

It’s quite a simple answer. Bonus points for explaining how a PureComponent is different than a
function based component which is a pure function, and that function based components are
considered best practice where applicable.

9
 http://wellpaidgeek.com/

Question 5: What is JSX?

What the interviewer wants to know

Of course the interviewer wants to know that you know what JSX is, but also implicit in this
question is asking if you have some knowledge of modern JavaScript build processes, since
JSX has to be compiled to JavaScript.

Answer

JSX stands for JavaScript XML. It allows you to write XML tags as valid JavaScript code. This
means React components can contain XML compliant HTML markup, which is a more natural
way of creating and using elements. This works because the JSX is compiled to JavaScript
(specifically calls to React.CreateElement) when the application is built, typically by use of a
JSX babel plugin.

Explanation of the answer

First you explain what JSX is, then show some knowledge of JavaScript build processes for
bonus points.

10
 http://wellpaidgeek.com/

Question 6: What is Redux, and what is the point in

using it?
What the interviewer wants to know

Again we have a simple intent on the surface, in this case wanting to know what Redux is. The
asking about the point of it goes a little deeper, as it enables the interviewer to determine if
you’re experienced enough to know the pitfalls of not using a good state management solution
(and the pitfalls can be huge), and so have some level of appreciation of application
architecture. Some newbies have never used anything but Redux, so like with React they don’t
know why it’s good, they just know it’s widely used so assume it’s good. Make yourself shine
compared to those people by explaining exactly why Redux rocks.

Answer

Redux is a state management library. That means is manages the storage and flow of local data
around an application. It is agnostic of a view library, but is most often used with React.

At its core is the store, which contains the applications state. The state can only be changed by
dispatching actions to it, which are passed to a pure function called a reducer. The reducer uses
the properties of the action and the current state to determine the new state. The store will then
notify subscribers of a state change, and they can get the latest version of the state.

The main advantages of redux are probably its simplicity and predictable nature.

With many other ways to handle state (for example angular), state can be modified from
anywhere. This can make it really hard to know what has modified the state, when it was
modified, or if the modification was happening correctly.

Redux enforces a predictable linear data flow of dispatch action -> reducer called -> update
state. This means we can easily observe actions and resulting state changes in redux using
middleware, and it makes it very easy to reason about what is happening in the system. This
leads to ease of debugging and testing.

Explanation of answer

Obviously you explain what Redux is. As for the explanation of why it’s good, “predictable” and
“easy to reason about” are words any Redux loving interviewer will relish hearing. A nod to the
purity of reducers is also important. You want to convey that knowing how the state got to the
current state is the key to Redux’s greatness.

11
 http://wellpaidgeek.com/

Question 7: How would you handle asynchronous

actions in Redux?
What the interviewer wants to know

They want to know that you’ve done more than one of those basic ‘to do list’ tutorials, which
everyone seems to use to teach Redux. If you’ve ever done anything ‘real world’ in Redux,
you’ve almost certainly needed actions that make use of HTTP requests which are
asynchronous. Knowing this is very much a prerequisite to being able to do Redux
professionally.

Answer

There are a number of modules out there to handle async in Redux, and therefore a number of
acceptable answers.

If you’ve taken my React and Redux course, the obvious answer to this is to use the redux-saga
module which uses generators to enable async actions. There are other options out there such
as thunks or RxJS. All of these answers are acceptable, but be prepared to defend your choice,
as a good interviewer will always ask a follow up ‘Why?’

Explanation of answer

Nothing to say here!

12
 http://wellpaidgeek.com/

Question 8: What is a pure function? Why must a

Redux reducer be a pure function?
What the interviewer wants to know

React and Redux both borrow some concepts from functional programming, so the interviewer
wants to find out if you understand a basic functional programming principle. In addition to this,
your knowledge of some of the inner workings of Redux is also being tested.

Answer

A pure function is a function which will always return the same result given the same arguments,
and will never cause any side effects. “No side effects” means they don’t alter the system’s state
in any way. They are useful because they are predictable and easy to test, as they have no
reliance on any global state.

The Redux reducer must be pure because the whole principle of Redux is that the new state
can be determined by the action and the current state (which are the reducer’s arguments). An
impure function would break this concept, thus destroying the predictable nature of Redux.

In addition to this, if the state is updated in any way other than the reducer returning a new
state, Redux won’t know it’s changed, and so won’t be able to notify it’s subscribers of the
change. It breaks the whole system.

Explanation of Answer

Remembering to mention side effects is good, as many people will miss this. A through
explanation of how a pure function is critical to Redux’s whole way of working shows the
interviewer you really appreciate how and why Redux works.

13