React Interview Questions and Answers
React Interview Questions and Answers
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.
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.
Virtual DOM
Optimised performance
JSX(JavaScript and HTML
Combination
Highly popular
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.
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 object
Initialising state value
Updating state
The child component cannot modify the props, but can use the
values to render its own output.
Child Component
Accessing props
Div(Container)
div(Product Row)
Div(Container)
div(Product Row)
Div(Container)
div(Product Row)
Actual DOM
What is JSX?
JSX is a way to write HTML-like code in JavaScript, particularly in
React.
HTML Code
JavaScript Code
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.
This new component "wraps" the original component and can add
extra features, such as props or state, to the wrapped component.
getDerivedStateFromProps shouldComponentUpdate()
render render()
componentDidMount getSnapshotBeforeUpdate()
componentDidUpdate()
U componentDidMount or update
This function will be executed when
If the dependency array is left empty "[]", the function will only
execute once, similar to the behavior of the componentDidMount()
method.
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
U
Setting data to component state
Udata
Fetching
U data
Printing
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.
This allows you to track and identify the cause of the error and
take appropriate action to fix it.
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.
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.
Component 1
Component 2
Component 3
Component 4
At that time redux will help you to manage the data easily. Let's
understand it through diagram.
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.
Store Action
Actions sent to
Reducer updates
Reducer reducer with payload
store
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.
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.
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.
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.
ImportingUuseState
StateUName InitialUstate
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).
Getting data on
U
component load
current holds
U value
Updating
U value
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
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
This method allows you to tell React when it should and should not
update a component.
synthetic event
1. CSS Classes:
You define classes in your CSS file, and then reference them in your
React component with the className attribute.
2. Inline Styles:
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
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
Let's say we're creating a simple application to fetch and display a list
of books from an API.
@richwebdeveloper
@new_javascript
@developerupdates
@developerupdates
@_chetanmahajan
Download on Gumroad
WWW.DEVELOPERUPDATES.COM