REACT INTERVIEW

QUESTIONS & ANSWERS

Important React questions and answers for
front-end developer technical interview

DEVELOPER UPDATES
REACT INTERVIEW QUESTIONS AND ANSWERS

What is React?
React is a JavaScript library that is primarily used for building
user interfaces. It allows developers to create reusable UI
components, making it easier to update and maintain the
codebase.

React utilizes a virtual DOM, which is a lightweight in-memory

representation of the actual DOM. The virtual DOM improves the
performance of the application by only updating the parts of the
UI that have changed. This makes React more efficient and
faster than other libraries that update the entire DOM on every
change.

One of the key features of React is its ability to manage the state
of the components. This means that developers can easily keep
track of the data and changes within their UI components,
leading to a more efficient and streamlined development
process.

React is also known for its use of JSX, a syntax extension that
allows developers to combine JavaScript and HTML-like
elements to create complex user interfaces. This makes it more
intuitive for developers who are familiar with HTML and CSS to
work with React.

In addition to being used as a standalone library, React is often

paired with other libraries and frameworks such as Redux for
state management and React Router for client-side routing. This
allows developers to create even more powerful and dynamic
user interfaces.

What is the latest version of React?

React latest version is 18.2 which is release in June 2022

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 01

REACT INTERVIEW QUESTIONS AND ANSWERS

What are the advantages of using React?

Reusable Components

Virtual DOM

Server side rendering

Advantages of
using React One Way Data Flow

Optimised performance
JSX(JavaScript and HTML
Combination

Highly popular

Components: Make user interfaces by using small, reusable parts

called components. Each component has its own set of
information and actions that can be easily managed and
changed.

JSX: React uses JSX to make UI using JavaScript and HTML-like

elements, making it easy for developers who know HTML and
CSS.

Reusability: React components are reusable, making it easy to

maintain and scale the codebase as the application grows.

Virtual DOM: React uses a virtual DOM to improve performance

by only updating the parts of the UI that have changed.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 02

REACT INTERVIEW QUESTIONS AND ANSWERS

One-way data flow: React follows a one-way data flow where data
is passed from parent component to its children making it easy to
manage data in the application.

Server-side rendering: React allows for server-side rendering,

which can improve the performance and SEO of the application.

Performance Optimization: React has built-in performance

optimization features like shouldComponentUpdate and
React.memo to control and avoid unnecessary re-renders.

Popularity: React is popular and has a large community of

developers, providing many resources and tutorials to help
developers learn and solve issues.

Event handling: React has a consistent and intuitive way of

handling events, making it easy to add interactivity to the
application.

What is State?
State is a private object(You can say variable) used to store data
that can change within a component, it is used to track the
current state(data) of a component and can be updated by the
component.

State can be any type of data, such as a string, number, object,

or array. It can also be a complex data structure, like an object
containing multiple properties and nested objects.

Let's take an example of how state can be used in simple

shopping cart.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 03

REACT INTERVIEW QUESTIONS AND ANSWERS

Importing hooks to use states

state object
Initialising state value

function to update state

Updating state

What are the props?

props stands for "properties" and refers to a way of passing data
from a parent component to a child component.

Props are passed to a child component as an object and can be

accessed using the function argument.

The child component cannot modify the props, but can use the
values to render its own output.

Let's take an example of React Props:

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 04

REACT INTERVIEW QUESTIONS AND ANSWERS

Child Component

Accessing props

Printing props value

Using Child Components

Passing props to child component

What is the difference between state and props?

Props are passed from a parent component to a child
component, while state is managed and controlled within a
single component.

Props are read-only and cannot be modified by the child

component, while state can be updated and modified by the
component itself.

Props are used to make a component reusable and

controlled by the parent component, while state is used to
manage the internal data of a component that can change
over time.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 05

REACT INTERVIEW QUESTIONS AND ANSWERS

What is virtual DOM in React?

The virtual DOM is a technique used in web development to
improve the performance of web applications.

It creates a lightweight copy of the actual DOM, which is the

structure of the HTML elements in a web page.

When the state of the application changes, the virtual DOM

updates its copy and then calculates the most efficient way to
update the actual DOM.

This minimizes the number of changes that need to be made to

the actual DOM.

It acts as an intermediary between the application state and the

actual DOM. When the state of the application changes, the
virtual DOM updates its representation, and then compares it to
the previous one.

It then calculates the most efficient way to update the actual

DOM, making only the necessary changes to the HTML elements.

Let's take an example,

You are building an eCommerce app and your page design is as

follows.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 06

REACT INTERVIEW QUESTIONS AND ANSWERS

Menu List Cart

Product Product Product

Product Product Product

eCommerce HTML Page

Initial virtual DOM Tree will be as follows

Div(Container)

ul(menu list) div(cart with item count)

div(Product Row)

div(Product) div(Product) div(Product)

Initial Virtual DOM

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 07

REACT INTERVIEW QUESTIONS AND ANSWERS

Div(Container)

ul(menu list) div(cart with item count)

div(Product Row)

div(Product) div(Product) div(Product)

When user add/remove item into cart this

virtualDOM will be updated

Updated Virtual DOM

After comparing previous snapshot of virtual DOM ReactDOM will

updated actual DOM as follows

Div(Container)

ul(menu list) div(cart with item count)

div(Product Row)

div(Product) div(Product) div(Product)

ReactDOM will update actual DOM

Actual DOM

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 08

REACT INTERVIEW QUESTIONS AND ANSWERS

What is JSX?
JSX is a way to write HTML-like code in JavaScript, particularly in
React.

It is used to define the structure and content of a component,

and when the component is rendered, the JSX is converted into
actual HTML elements on the browser.

HTML Code

JavaScript Code

What is the difference between stateful and stateless

components in React?
A stateful component in React maintains its own internal state,

while a stateless component does not have its own state and
instead relies on data passed to it via props.

Note:
Stateful components are also known as smart or container
components
Stateless component are also known as dumb or
presentational components.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 09

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain the difference between a class and functional

components in React?

Class Component Functional Component

Class component defined using Functional components are

the "class" keyword. defined as JavaScript functions.

Functional components do not

Class components have a built-in have built-in state objects, but
state object. you can manage the state by
using hooks.

Functional components do not

have a built-in lifecycle
Class components have built-in
method, but you can achieve
lifecycle methods.
similar functionality using
hooks.

The "this" keyword is used to

Functional components do not
access the component instance in
have this keyword.
the class component.

Functional component does not

Class component must have
need a render method, it
render() to return JSX
directly returns JSX.

Can you explain the concept of higher-order

components in React

A Higher Order Component (HOC) is a technique in React that

enables code reuse.

It is a function that takes an existing component as an

argument(input) and returns a new component.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 10

REACT INTERVIEW QUESTIONS AND ANSWERS

This new component "wraps" the original component and can add
extra features, such as props or state, to the wrapped component.

Taking higher order component as an argument

returning new component

Passing component to higher order component as an argument

In the above example, higherOrderComponent takes a

Component as an argument and returns a new component. Here
higherOrderComponent is reusing the Component.

Explain the component lifecycle in React.

In React component lifecycle has 3 phases:
1. Mounting
2. Updating
3. Unmounting

Component goes through several stages of its lifecycle, starting

from the moment it is created and ending with the moment it is
destroyed.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 11

REACT INTERVIEW QUESTIONS AND ANSWERS

Mounting Updation Unmounting

constructor() getDerivedStateFromProps() componentWillUnmount()

getDerivedStateFromProps shouldComponentUpdate()

render render()

componentDidMount getSnapshotBeforeUpdate()

componentDidUpdate()

1. Mounting: The Mounting stage is when a component is first added

to the DOM. During this stage, the following methods are called in
the following order

constructor(): This method is called before the component is

mounted, it is used for initializing state, binding methods, and
other setup tasks
getDerivedStateFromProps(): This method is called before the
render method, it allows the component to update its internal
state in response to changes in props.
render(): This method is responsible for rendering the JSX that
represents the component.
componentDidMount(): This method is called after the
component has been rendered to the DOM. It is used for
performing setup that requires the component to be in the DOM,
such as fetching data or adding event listeners.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 12

REACT INTERVIEW QUESTIONS AND ANSWERS

2. Updation: The Updating stage is when a component updates its

state or props. During this stage, the following methods are called in
the following order:

getDerivedStateFromProps(): This method is called before the

render method, it allows the component to update its internal
state in response to changes in props.
shouldComponentUpdate(): This method is called before the
render method, it allows the component to decide whether or
not to re-render in response to changes in props or state.
render(): This method is responsible for rendering the JSX that
represents the component.
getSnapshotBeforeUpdate(): This method is called before the
component is updated in the DOM. It allows the component to
capture some information from the DOM and state values.
componentDidUpdate(): This method is called after the
component has been updated in the DOM. It is used for
performing operations that require the component to be in the
DOM, such as fetching data or adding event listeners.

3. Unmounting: The Unmounting stage is when a component is

removed from the DOM. During this stage, the following method is
called:
componentWillUnmount(): This method is called before the
component is removed from the DOM. It is used for performing
cleanup tasks, such as removing event listeners or cancelling
network requests.

How would you implement the functionality of

component lifecycle methods in functional components?
Here's an example of how you can use the useEffect Hook to
implement the componentDidMount(), componentDidUpdate()
and componentWillUnmount() lifecycle methods in a functional
component.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 13

REACT INTERVIEW QUESTIONS AND ANSWERS

U componentDidMount or update
This function will be executed when

Dependency array forUcomponentDidUpdate()

U when component will mount
This block of code will be executed

If the dependency array is left empty "[]", the function will only
execute once, similar to the behavior of the componentDidMount()
method.

If the dependency array is removed, the function will be executed

each time the component is re-rendered.

How to handle events in React?

We can handle events in 2 ways, first one is by passing an event
handler function to an element's event attributes and the second
one is by adding an event handling script in the useEffect hook
with an empty dependency array([]).

let's take an example,

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 14

REACT INTERVIEW QUESTIONS AND ANSWERS

U Button event
Handling Click Me

U
Handling hello_button event

U events
Script to handle
U array
Keep empty

U
Passing event handler function to event attribute

In the above example, For Click Me button we passed event

handler function and to Say Hello Button we added script in
useEffect hook.

How to Integrate REST API in React?

Integrating an API into a React application can be done in various
ways, a popular method is by utilizing the fetch() function or a
library such as axios to perform API calls and subsequently using
the returned data to modify the state of the React components.

Here is the example of fetching data from API using fetch().

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 15

REACT INTERVIEW QUESTIONS AND ANSWERS

U
Setting data to component state

Udata
Fetching

U data
Printing

Using useEffect to load dataU

after mounting the component

In the above example, You can see we have used useEffect hook,
Because it observes the changes in the component's props or
state and triggers the callback function to re-execute upon any
change detected.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 16

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain Error Boundaries in React.

Error boundaries are React components that are used to catch
JavaScript errors that occur anywhere in their child component
tree.

They are used to handle unexpected errors in your application

and display a fallback UI to the user, instead of letting the
component tree crash.

Additionally, error boundaries also log the error that occurred,

which can be useful for debugging and troubleshooting.

This allows you to track and identify the cause of the error and
take appropriate action to fix it.

Let's take an example of error boundary component:

Method to render error

U
message to user

Log app errors here for

U
This method work like debugging
U
catch()

Show Error Message to

U
Users, You can customize it

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 17

REACT INTERVIEW QUESTIONS AND ANSWERS

Integrating Error Boundaries in your app

ErrorBoundaryComponent will catch errors in the components below

U
them, so it will catch error for MyComponent

What are the constraints of using error boundaries?

Error boundaries have some limitations, they don't catch errors
that occur in the following cases:

Event handlers: Any errors that happen inside event handlers

will not be caught by error boundaries.
Asynchronous code: Errors that occur in asynchronous code
such as setTimeout or requestAnimationFrame callbacks will
not be caught by error boundaries.
Server side rendering: Error boundaries only work on the
client-side, so any errors that happen during server-side
rendering will not be caught.
Error boundary itself: If an error boundary component itself
throws an error, it will not catch it. The error will be
propagated to the closest error boundary above it.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 18

REACT INTERVIEW QUESTIONS AND ANSWERS

What are the different state management libraries

available for React?
Redux
Context API
Recoil
MobX
Jotai

What is redux?
Redux is a state management library for JavaScript applications,
often used in combination with React, but can also be utilized
with other JavaScript libraries and frameworks like Angular and
Vue.js.

Redux enables centralization of the application's state, which is

read-only and can only be altered by dispatching actions.

Explain the scenario when you use Redux.

Let's take an example you are building an e-commerce
application, the cart component is a crucial aspect that requires
proper management of state.

To store the cart count and data, one approach is to use the local
state of the cart component and pass the relevant information to
child components via props.

This allows for a clear and organized flow of data, and makes it
easy to track and update the state of the cart throughout the
application.

However, if the need arises to share the cart data with parent
components or other components in the application, relying
solely on local state and props can become challenging and
complex.

It can be difficult to ensure that all necessary components are

properly updated and that the data flows through the application
correctly.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 19

REACT INTERVIEW QUESTIONS AND ANSWERS

In this scenario, using a state management library like Redux can

help simplify the process of sharing and updating the cart data
throughout the application.

Component 1

Component 2

Component 3

Component 4

As you can see in the above diagram, we can pass data to

components below it in the tree, such as from Component 1 to
Component 2, then to Component 3, and finally to Component 4.

What if you have to pass data from Component 4 to Component

1? It will be very difficult to manage the flow of data.

At that time redux will help you to manage the data easily. Let's
understand it through diagram.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 20

REACT INTERVIEW QUESTIONS AND ANSWERS

Component 1

Component 2

Component 3

Redux Store

Component 4

As you can see in the above diagram, Redux allows for easy access
and management of the application's state by any component.

Each component can access the state from the centralized store,
and update it by dispatching actions.

This approach greatly simplifies the process of managing and

updating state across the entire application, as all components have
access to redux store.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 21

REACT INTERVIEW QUESTIONS AND ANSWERS

How redux works in React?

Let's first understand the flow using diagram:

When state is updated

and subscribed by Component dispatch
Component
component it rerender Actions
component

Store Action

Actions sent to
Reducer updates
Reducer reducer with payload
store

1. Store: A central repository holding the application's state.

2. Actions: Plain JavaScript objects representing events in the
application.
3. Reducers: Functions that take current state and an action,
then return a new state.
4. Dispatch: The method to broadcast actions to the store.

Here is how it works.

1. An event occurs (e.g. user interaction).

2. An action describing the event is dispatched.
3. The dispatched action goes to the reducer.
4. The reducer takes current state and the action to produce a
new state.
5. The store updates with the new state.
6. React components connected to the store get the updated
state and re-render.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 22

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about actions in Redux.

As you can see in the diagram, Components in the application can
access the state from the store and update it by dispatching
actions.

The state of your application is the collection of all data that

represents the current state of the application.

For example, imagine you have a to-do list application. The state
of your application would contain a list of to-do items, as well as
information about which item is currently selected or being
edited.

An "action" in Redux is a plain JavaScript object that represents

an intention to change the state of your application. It describes
what kind of change you want to make, but doesn't actually make
the change itself. For example, consider the following action:

This action represents an intention to add a new to-do item with

the text "Study Redux" to the list of to-do items in your
application's state.

In Redux, you don't modify the state directly. Instead, you

dispatch actions, which are then processed by a reducer.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 23

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about reducer in Redux.

A reducer is a pure function that takes the current state of your
application and an action, and returns a new state that reflects
the change described by the action.

For example, here's a simple reducer that processes the

"ADD_TODO" action:

Action
U
Current
U State

Updating state U
with action data

To keep current
U state as it is

This reducer takes the current state (an array of to-do items), and
returns a new state that includes the new to-do item represented
by the "ADD_TODO" action.

Explain about store in Redux.

In Redux, the "store" is a central place where the state of your
entire application is kept.

It's where you access the state of your application, and it's the only
place where the state can be modified by dispatching actions.

The store is created by calling createStore and passing in a

"reducer" function, which updates the state based on the actions
dispatched to the store.

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 24

REACT INTERVIEW QUESTIONS AND ANSWERS

Importing functionUto create a store

Passing reducer while

U creating store

Once you have created the store, you can access the state of your
application by calling the getState method on the store and if you
are using a functional component you can use redux hook
useSelector to access the state.

Accessing state of application

U using getState

Accessing state of application

U using hooks

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 25

REACT INTERVIEW QUESTIONS AND ANSWERS

How do you debug redux?

We can debug redux using Google Chrome Extension Redux
DevTools.

The Redux DevTools extension provides a visual interface for

exploring the state of your Redux store and the actions being
dispatched to it.

Here is the screenshot of Redux DevTools

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 26

REACT INTERVIEW QUESTIONS AND ANSWERS

What are the hooks?

Hooks in React provide a way for functional components to have
access to state and lifecycle features, which were previously only
available to class components.

They offer several benefits, including improved code organization,

increased code reuse, and better performance through optimized
updates and re-renders.

Hooks allow developers to write more readable and maintainable

code by separating state logic from the component logic and
making it reusable across multiple components.

What are the various types of Hooks available in React?

Basic Hooks
useState
useEffect
useContext
useSelector
Additional Hooks
useCallback
useReducer
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
useId

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 27

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about useState Hook.

useState is a hook in React that allows you to manage the state of
your components. State is a way to store and manipulate data in a
React component.

For example, consider a shopping cart application. The shopping

cart has a list of items and a total price.

The state of the shopping cart component could be represented

as an object with two properties: items and total.

Here's an example of how you could use useState to manage the

state of a shopping cart component:

ImportingUuseState

StateUName InitialUstate

Function toUchange state

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 28

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about useEffect Hook.

useEffect is a hook in React that allows you to run a side effect,
such as updating the state or making an API call, after rendering a
component.

For example, consider a shopping cart component that fetches

the list of items from a server.

You could use useEffect to run an effect that fetches the items
when the component is first rendered(If you want to update after
a state change you can pass it to the dependency array).

Here's an example of how you could use useEffect to fetch the

items for a shopping cart component:

Getting data on
U
component load

Keep dependancy array empty to load

U
data when component renders first time

You can add state or other variables if you want to

U
get data after their values change

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 29

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about useRef Hook.

UseRef is like a memory box in React that you can use to store
information that you don't want to change, but you still want to
use later.

For example, you can store a reference to a DOM element in it so

that you can interact with that element in your code.

When you update other parts of your component, the information

stored in useRef remains unchanged.

For example, consider a counter component that has a button to

increment the counter value. You could use useRef to keep track
of the counter value and use it to update the display.

Here's an example of how you could use useRef to keep track of

the counter value in a counter component:

Declaring useRef object

U
with initial value as 0

current holds
U value

Updating
U value

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 30

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about useSelector Hook.

useSelector is a hook in the React-Redux library that allows you to
access the state managed by Redux from your React components.

For example, in an to-do app, you are using Redux to manage the
state of the to-do list.

With useSelector, you can access the current state of the to-do list
in your React component, so that you can display the all tasks and
mange it.

accessing todos
U state
from redux store

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 31

REACT INTERVIEW QUESTIONS AND ANSWERS

Explain about useId Hook.

useId is a hook in React that generates a unique identifier (id) that
can be used for accessibility purposes,

When building accessible UIs, it is important to ensure that all

components have a unique and consistent identifier.

The `useId` hook provides a way to generate such identifiers in a

way that is consistent across renders and avoids naming
collisions.

Let's suppose you are building a simple menu component that

allows users to select an option.

You use the `useId` hook to generate a unique identifier for each
option, which you then use to associate each option with a label
for accessibility purposes. Here is an example:

Generating unique
U
identifier for each option

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 32

REACT INTERVIEW QUESTIONS AND ANSWERS

How to prevent re-renders in React?

One common technique is to use the shouldComponentUpdate()
lifecycle method.

This method allows you to tell React when it should and should not
update a component.

The default behavior is for the component to re-render whenever its

state or props change, but you can override this behavior with
shouldComponentUpdate().

Here's an example of how to use shouldComponentUpdate() to

prevent re-renders:

It will re-render only when

U someProp changes

Another technique for preventing re-renders is to use React.memo().

This is a higher-order component that can "memoize" a component
based on its props.

Essentially, it will only re-render the component if its props have

changed. Here's an example:

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 33

REACT INTERVIEW QUESTIONS AND ANSWERS

What are Synthetic Events?

A synthetic event is a cross-browser wrapper around the browser’s
native event. They combine the behavior of different browsers into
one API, ensuring that your React apps work consistently across all
browsers.

Synthetic events in React serve as a universal interpreter for browser

interactions. Synthetic events standardize browser interactions like
clicks or keyboard input. This saves you from dealing with varied
browser behaviors.

Let's understand it with example:

synthetic event

To prevent default browser behaviour

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 34

REACT INTERVIEW QUESTIONS AND ANSWERS

What are the different ways to style a React

component?
Here are the four main methods to style React Components:

1. CSS Classes:

This method uses traditional CSS in an external .css file.

You define classes in your CSS file, and then reference them in your
React component with the className attribute.

Class in Css File

React Component using Css class

2. Inline Styles:

Here, we apply styles directly within the React component. React's

inline styles don't behave exactly like CSS.

Rather than a CSS property being a string of hyphen-separated

words, React uses camelCase syntax.
camelCase syntax

Applying color and font size directly within component

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 35

REACT INTERVIEW QUESTIONS AND ANSWERS

3. Styled-components:

This is a library you can install in your React project. It lets you write
actual CSS in your JavaScript files. It keeps the styles scoped to the
components, avoiding conflicts.

Styled Component

Using styled component

4. CSS Modules:

With CSS Modules, you can create CSS files that are scoped locally by
default. It means you can use the same CSS class in different files without
worrying about naming clashes.

App.module.css file

Importing module

Using style from module

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 36

REACT INTERVIEW QUESTIONS AND ANSWERS

What is redux thunk?

Redux Thunk is middleware for Redux that lets you write action
creators that return a function instead of an action.

It can be used to delay the dispatch of an action or to dispatch only if

certain conditions are met. Essentially, it gives your action creators
the power to be asynchronous.

Typically, Redux actions are dispatched immediately. But what if we

want to make an API call, wait for a response, and then dispatch an
action with the response data?

That's where Redux Thunk comes into play.

Let's say we're creating a simple application to fetch and display a list
of books from an API.

Without Redux Thunk:

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 37

REACT INTERVIEW QUESTIONS AND ANSWERS

With Redux Thunk:

Dispatching Loading Action

Making API Calls

On success, Dispatching action with the books

data

On failure, Dispatching action with error

DEVELOPER UPDATES WWW.DEVELOPERUPDATES.COM 38

 Stay ahead with daily updates!
Follow us on social media for useful web
development content.

@richwebdeveloper

@new_javascript

@developerupdates

@developerupdates

@_chetanmahajan

Note: This kit is continuously updated. Please continue to

check Gumroad or our website (where you purchased this) for
updated questions and answers. You will receive all updates
for FREE

Download from our Website

Download on Gumroad

WWW.DEVELOPERUPDATES.COM