Cheat Sheet for React Interview Questions 2020

This page aims to aggregate multiple basic React interview questions in a succinct and unopinionated manner. I try my best to adhere as closely to React source documentation as possible but if you see anywhere that information can be better summarized please let me know.

Please Note Before Reading:
These answers are meant as quick references/ light refreshers and are not comprehensive explanations or tutorials. One main purpose of this page is to redirect users to great sources containing answers and further readings for said questions. As such, I have included my citation links throughout most questions. Please refer to those for a more thorough explanation.

This sheet also only covers a basic overview, it doesn’t go in-depth of the inner workings or practical applications of React that may very well be required for more experienced positions.

Table of Contents

• Legend
• Basics
• Fundamentals
• Hooks
• State Management
• Open-Ended Questions

Legend

#. Questions often are linked to a page with an overview of the subject

• Keyword followed by a definition
• syntax
• bullets will occasionally end in a citation or relevant article link¹
• (B) = Bonus/good to know knowledge
• Further Readings: More In-depth Reading

Basics

These questions show a basic grasp of what React is and how it works:

1. What is React?

• React is a JavaScript library for building user interfaces
• By Facebook

2. What are React’s Key Features?

• Virtual DOM
• JSX
• Unidirectional Data Flow
• Server-Side Rendering

3. What is JSX?

• JSX is a Javascript syntax extension that allows us to write HTML in our JavaScript to create React Elements
• Babel compiles JSX into React.createElement() calls
• Cleaner code with JSX expressions
• (B) Safer code as the usage of JSX prevents XSS attacks¹

4. What is the Virtual DOM?

• Manipulating the actual DOM is expensive
• Virtual DOM: React makes a virtual representation of the actual DOM in memory
• Expected changes are first reflected in an updated version of the Virtual DOM. The updated virtual DOM is compared with its previous version using React’s ‘diffing’ algorithm to determine how to best update the real DOM
• Further Reading: Reconciliation, Inside Fiber: in-depth overview of the new reconciliation algorithm in React, Virtual Dom is Pure Overhead

Fundamentals

1. What is a Component in React and what are the two main ways to define them?

• Component: an independent reusable piece of the UI
• Class Component: Component implemented using ES6 Classes extending React.Component
• Function Component: Component implemented by a JS function that takes a props argument and returns a React element

2. How do Class components compare with Function components?

• With React Hooks, class components are replaceable with function components for the majority of use cases¹
• In the past, stateful and life cycle logic could only be incorporated in class components

Function Component Disadvantages

• There are no Hook equivalents yet for the uncommon life cycles: getSnapshotBeforeUpdate and componentDidCatch
• Older third-party libraries might not be compatible with hooks yet

Class Components Disadvantages

• Classes add unnecessary confusion for the sake of syntactic sugar²
• Classes lead to a bulky hierarchy tree, especially during code reuse, which results in performance decreases and difficulty testing³
• Class lifecycle methods split up related pieces of code⁴
• Further reading: How Are Function Components Different from Classes?

3. What are props and state in React?

• props is the JavaScript object, passed into a Component, that holds the configuration properties¹
• props is immutable by the receiving Component
• state is the JavaScript object, managed within the Component, that holds its internal state.
• Updates to either trigger a re-render

4. What causes a component to update?

• A re-render of the parent which may entail new Props
• setState()
• (B) forceUpdate() (and that it should be avoided!)

5. What doessetState() do and how does it work?

• setState() schedules an update to a component’s state object. When state changes, the component responds by re-rendering.
• Calls to setState() are asynchronous and may be batched¹ ²
• Updates to this.state do not reflect the new value immediately after calling setState()
• Because of its asynchronous nature, Calling setState() by passing an object containing the current state value can result in unexpected behaviour
• Passing setState() a function rather than an object allows you to access the current state value, avoiding potential unexpected behaviour caused asynchronicity

6. Walk me through the main phases of the React Lifecycle

• 3 phases: Mounting, Updating, Unmounting
• Mounting: constructor → render → DOM update → componentDidMount
• Updating: render → DOM update → componentDidUpdate
• Unmounting: componentWillUnmount
• (B) inclusion of getDerivedStateFromPropsand shouldComponentUpdate

7. How can I prevent unnecessary re-rendering?

• React.PureComponent : Components created off of this class do a shallow comparison with the upcoming props and state and re-render if there are changes
• React.Memo: Higher-order component that works like React.PureComponent but used for function components
• shouldComponentUpdate : Lifecycle method that takes in the next props and state and returns a boolean indicating if the component should rerender

8. My React app is slow, how do I improve its performance?

• Identify bottlenecks: Profiling components in Chrome via Chrome Performance Tab or DevTools Profiler
• Virtualize long lists — only render list nodes as you need them
• Avoiding unnecessary re-renders (See the previous question)
• Using a Production Build

9. What are refs and what are they used for?

• Refs provide access to DOM nodes or React elements created in the render() method
• In the past, refs were limited only to class components but now can be accessed in function components via the useRef hook

Uses include:

• Managing focus, text selection, or media playback.
• Triggering imperative animations.
• Integration with third-party DOM libraries.

10. When rendering lists, what are keys and why do you need them?

• Keys are constant strings values that uniquely identifies a list item among its siblings
• Keys help React identify which items have changed, are added, or are removed.
• Keys are necessary because reconciling list elements differences without them is highly inefficient¹

11. What are Controlled and Uncontrolled components in React?

• Both are ways to implement form controls in React
• Controlled: form data is handled by a React component
• Uncontrolled: form data is handled by the DOM itself
• Controlled components are the recommended way to implement forms
• Uncontrolled components are an option when converting legacy code bases to React, or integration with a non-React library¹

12. What is props.children?

• The content between the opening and closing tags of a component is passed as the children attribute of props: props.children
• props.children can be string literals, HTML syntax, JS expressions, and JS functions

13. What are Error Boundaries?

• Error Boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI
• Components become Error Boundaries if they define either: getDerivedStateFromError() or componentDidCatch()
• Error Boundaries are usually defined once and used throughout the application by wrapping around other components like catch blocks

14. Talk to me about handling events in React. Where does SyntheticEvent fit into the picture?

• Handling events on React elements is similar to that of regular DOM elements except React sports several syntactic differences¹
• Syntax Difference 1: React events are named using camelCase, rather than lowercase.
• Syntax Difference 2: With JSX you pass a function as the event handler, rather than a string.
• React elements receive synthetic events on handling
• SyntheticEvent : A React cross-browser wrapper object around the browser’s native event
• SyntheticEvent allow events to function identically across browsers

15. Why would you bind a function in a class component?

• The problem stems from Javascript rather than React
• In JavaScript, this is the context of a function and takes on dynamic values depending on how the function is invoked
• When the function used as an event handler as part of a class, this is not bound and as a result is undefined, causing an exception to be thrown if this.state or this.props is accessed
• Resolution 1: this can be explicitly bound using the bind() method
• Resolution 2: Because arrow functions take the thisvalue of their enclosing lexical scope, this can be bound with the use of arrow functions

16. What are the common approaches to reusing code in React?

Higher-Order Component

• Higher-order component: A function that takes a React component and transforms it into another component by enriching it with reusable functionality
• Common in third-party libraries, a prevalent example is React Redux’s connect
• Easily compose a component by chaining multiple HoC’s
• Disadvantage: Poor readability when chaining many HoC’s resulting in Wrapper Hell
• Disadvantage: Wrapper hell can result in a nested tree and difficulty debugging

Render Props

• Render Props: A pattern where a component uses a prop (a function) that dictates its render logic rather than implementing its own.
• Prevalent example is React-Router
• Disadvantage: Can potentially be verbose as render logic needs to be passed into JSX
• Disadvantage: Incorrect implementation can lead to memory issues¹

Custom Hooks

• A custom hook is a Javascript function whose name starts with ‘use’ and calls other hooks
• Part of React 16.8 hook update, and allows you to reuse stateful logic without restructuring your component hierarchy
• In most cases, custom hooks are sufficient in replacing render props and HoCs and reduce the amount of nesting needed²
• Allow you to avoid wrapper hell/multiple layers of abstraction that can come with Render Props and HoCs
• Disadvantage: Hooks cannot be used inside classes³

Misc:

• All 3 are ways of tackling Cross-Cutting Concerns: ¹ ² ³
• Common follow up is to implement a simple HoC, Render Prop, or custom hook
• Further Readings 1: Higher-order components vs Render Props
• Further Reading 2: Comparison: HOCs vs Render Props vs Hooks

17. Why should async calls be made in componentDidMount and not the constructor?

• A common misconception is that fetching data in the constructor avoids an additional rendering step compared to componentDidMount
• Reality: Fetching data in the constructor offers no performance improvements over componentDidMount¹
• Data won’t be loaded if the async request in constructor completes after the component mounts
• Best practices are to avoid side effects in constructor
• In the constructor, the state should be initialized andsetState() should not be called²
• (B) Data fetching via async calls can be managed using the useEffect hook³
• (B) React Suspense is a potential alternative to fetch data in the future⁴

React Hooks

1. What are React Hooks?

• New feature in React 16.8
• Allows function components to use state and other previous class-only features
• Backwards compatible and optional

2. Why should I use hooks?

• Hooks allow for simply reuse of stateful logic without layering abstractions like HoCs and Render Props (See the question about code reuse)
• Fully opt-in and backward compatible
• Hooks make complicated components easier to understand by grouping related code together into functions
• Hooks allow you to avoid Class components which introduce unnecessary complications

3. What is the useState hook?

• useState is a Hook that lets you add React state to function components
• useState like all Hooks is a function
• Argument: the initial state
• Returns: Pair containing the current state and a function to update it.

4. What is the useEffect hook?

• useEffect lets you perform side effects in function components
• useEffect is triggered after a render
• useEffect is like the combination of componentDidMount, componentDidUpdateand componentWillUnmount
• Arguments: function to be called, and an array for React to check for changes in order to render

5. What is theuseReducer hook?

• useReducer is an alternative to useState that is used when there is complex state logic that that involves multiple sub-values or when the next state depends on the previous one
• 3 Arguments: Reducer function, initial State Object, and a function to initialize the state lazily
• Reducer function takes the current state and action variable and returns the next state
• Returns: a pair containing the current state, and a dispatch function for dispatching an action.
• Works similarly to Redux

6. What are custom hooks?

• (See the question about code reuse, specifically the section about custom hooks)

7. How do does the performance of using hooks compare to that of classes?

• Hooks avoid a lot of the overhead that is present with classes such as the creation of instances and binding of events
• Hooks result in smaller component trees because it avoids the nesting present in HoCs and render props resulting in less work for React to do.

State Management

1. What is Redux?

• Redux is a library for managing application state
• Redux is a solution for global state management, allowing you to pass data without the need to pass props through every level (aka props drilling)
• Inspired by Facebook’s flux architecture

2. What are the main constituents of Redux?

Actions

• Actions are plain Javascript objects with type property to indicate what type of action is being performed
• Actions are dispatched to the central store using store.dispatch()
• Actions are usually created by Action Creator functions, which given some input generates the corresponding action.

Reducers

• Reducers are functions that take an Action and a current state and returns the resulting state
• Reducers must be pure functions and have no side effects

Store

• The Store is the central object that maintains and updates the application state
• The Store also handles the registration and unregistering of listeners

3. How does Redux work?

• Redux revolves around strict unidirectional data flow
• First: an Action is dispatched to the store via store.dispatch(action)
• Second: Redux determine the resultant state by calling a Reducer function
• Third: The root reducer combines the output of multiple reducers into a single state tree
• Fourth: The Store saves the new state tree and notifies listeners that are registered

4. What are Redux Selectors?

• A Selector is a function that takes in the Redux store state and returns the derived desired data from that state.
• Selectors allow the Redux store state to be as minimal as possible by computing data off of the state
• Selectors allow for better separation of concern by keeping components free from state transformation logic
• Selector computations can be memoized to prevent additional computation
• Selectors can also be composed and reused across an application

5. What is Redux Toolkit?

• Redux Toolkit: an official opinionated Redux toolset to get you up and running quickly with Redux without having the worry about the boilerplate. Comes with premade functions and utilities that help easily configure the store and create actions and reducers.
• Redux Toolkit comes baked with widely used Redux Addons:
• Redux Thunk — Middleware for async logic
• Reselect — Easily create memoized selectors

6. What is Context API?

• Like Redux, Context API is a solution for state management
• Context is an official feature as part of React 16.3

Context has 3 main parts:

• A Context object is created using React.createContext(defaultValue)
• A Provider is a component that triggers all descendant consumers of itself to rerender when there is a change to its value
• A Consumer is a component that subscribes to context changes

7. How do I solve global state management with Hooks?

• By passing the useContext hook a context object, function components can hook onto changes to the nearest corresponding Provider and will rerender when there is an update
• Function components can alternatively still use Consumers to subscribe to Context updates, although useContext is arguably more readable¹

6. How does Context API compare to Redux and when would you use one over the other?

• Set up for Redux requires more additional work than Context as Context is built into React.
• For most smaller use cases simpler use cases, Context should be sufficient
• Redux allows access to middleware, which triggers a function after an action is dispatched
• Redux provides access to the robust debugging tool Redux DevTools, that allow you to time travel and see changes made to your store step by step
• Further Readings: Context Api vs Redux, Context vs Redux, Redux not dead yet, You Might Not Need Redux

Open-Ended Questions

What made you choose to use React?

What are some scenarios/reasons you wouldn’t choose React?

What are some things you are looking forward to in the future of React?

What are recent additions that you like about React?

What don’t you like about React?

What is something you’ve built in React?

• What are the challenges you faced building it?
• How did you overcome said challenges?

What is an interesting bug you encountered while working in React?

Tell me about your testing process at your current project

Sources:

I’ve aggregated my questions from these great sources, please give them a read for more in-depth answers and insight:

35+ Basic & Advanced ReactJS Interview Questions for 2019

React Interview Questions

A React job interview — recruiter perspective.

React Interview Questions & Answers (Frequently Asked)

ReactJS Interview Questions for Senior Developers