What is react js

?
React is an open-source JavaScript library developed for building user
interfaces, particularly for single-page applications.
what are the major features of
react?
Virtual DOM: React uses a virtual DOM to improve performance by
minimizing direct DOM manipulations.
JSX: JSX stands for JavaScript XML, which allows writing HTML in
React components.
Components: React is component-based, meaning the UI is built
using reusable components.
One-way Data Binding: Data flows in one direction, making the
application easier to understand and debug.
High Performance: React optimizes updates by using a virtual DOM
and efficiently re-rendering components.
Unidirectional Data Flow: Data flows in a single direction, which
provides better control over the entire application.
What is virtual DOM and how it
works ?
Virtual DOM is a lightweight, in-memory representation of the real DOM
elements generated by React components. React keeps a copy of the actual
DOM structure in memory, called the Virtual DOM, and uses it to optimize
updates and rendering.

Diffing
Rendering Updating
Algorith
m
Batch
Reconciliation Updates
What are components in react
?
Components are the building blocks of a React application. They are
reusable pieces of UI that can be nested, managed, and handled
independently.

Class Based Components Functional Components

Explain Class components with
example
Explain functional components with
example
What is
JSX ?
JSX stands for JavaScript XML.
It allows us to write HTML elements in JavaScript and place them in the
DOM without using methods like createElement() or appendChild().
How to export and import
components ?
We can export components using export default or named exports, and
import them using import.
How to use nested
components ?
What is state in
react ?
In React, state is an object that represents the
parts of the app that can change. Each
component can have its own state, which can be
managed within the component and used to
render the UI. When the state changes, React
re-renders the component to reflect the new
state.
What is state in
react ?
How to update state in
react ?
State in React is updated using the setState method in class components
or the useState hook in functional components.
What is setState
callback ?
The setState method can accept a callback function as the second
argument, which is executed once the state has been updated and the
component has re- rendered.
Why you should not update state directly , explain with
example
Updating state directly does not trigger a re-render of the component,
leading to inconsistencies in the UI. Instead, always use setState or state
hooks.
What are props in
react ?
Props are used to pass data and event handlers to child
components. Props ensure a one-way data flow, from parent to
child.
Props cannot be modified by the child component that receives
them.
What is difference between state and props
?
State is a built-in object used to store data Props (short for properties) are used to pass
that may change over the lifecycle of a data from a parent component to a child
component. It is managed within the component. They are read-only and
component itself. immutable within the child component.
Props are immutable. Once passed to a
State is mutable. It can be updated using
child component, they cannot be modified
the setState method in class components
by the child.
or the useState hook in functional
components.
Props are passed from a parent component
to a child component and can be accessed
State is local to the component and cannot
by the child.
be accessed or modified by child
components.
What is lifting state up in react
?
Lifting State Up is a pattern in React where state is moved up to the closest common ancestor of
components that need to share that state.
Single Source of Truth: By managing the state in the parent component, you ensure that the state is
consistent across multiple child components.
Simplified State Management: The state logic is centralized, making it easier to maintain and debug.
What is children prop in react
?
The children prop is a special property in React used to pass the content
that is nested inside a component.
What is defaultProps in
React?
defaultProps is used to set default values for the props in a
component.
What are fragments in react and its
advantages ?
Fragments allow you to group multiple elements without adding extra
nodes to the DOM.
How to use styling in
react js ?
We can use inline styles, CSS stylesheets, or CSS-in-JS libraries like
styled- components.
How can you conditionally render components in
React?
We can use JavaScript conditional operators (like if, &&, ? :) to
conditionally render components.
How to render list of data in
react ?
We can use the map function to iterate over an array and render each
item.
What is key
prop ?
The key prop is a unique identifier for each element in a list, used by
React to identify which items have changed, are added, or removed.
Why indexes for keys are not
recommended ?
Using indexes as keys can lead to performance
issues and unexpected behavior when list items are
reordered or removed. Keys should be unique and
stable.
How to handle buttons in
react ?
How to handle inputs in
react ?
We can use controlled components where form data is handled by
the component's state.
Explain lifecycle methods in
react
Lifecycle methods in React are special methods that get called at different stages of a component's
lifecycle.
Mounting: When a component is being inserted into the
DOM. Updating: When a component's state or props
change.
Unmounting: When a component is being removed from the DOM.
What are the popular hooks in react and explain
it’s usage ?
useState: Manages state in functional components.
useEffect: Manages side effects in functional components.
useContext: Consumes context in functional components.
useReducer: Manages state with a reducer function. For
more complex state management
useRef: Accesses DOM elements or stores mutable
values. useCallback: performance improvement
usecase useMemo: performance improvement usecase
What is useState and how to manage state
using it ?
What is useEffect hook and how to manage side
effects ?
useEffect is a hook that manages side effects like data fetching, subscriptions, or
manually changing the DOM.
How to implement data fetching in
react js ?
How to manage loading
state ?
What is prop drilling and how to
avoid it ?
Prop drilling occurs when you pass data through many layers of components. It can be
avoided using the Context API or state management libraries like Redux.
What is the Context API in React, and why is
it used?
Context API in React provides a way to share values (like data or functions) between
components without having to pass props through every level of the component tree.
It is used to avoid prop drilling.
How do you consume context using the
useContext hook?
The useContext hook allows functional components to access context
values directly.
How can you update context
values?
How do you use multiple Contexts in a single
component?
What are the advantages of using the Context API over
prop drilling?
Context API reduces the need for prop drilling, making the code more
readable and maintainable. It allows for easy sharing of state and
functions across the component tree without passing props through every
level.
What is the useReducer hook, and when should
you use it?
The useReducer hook is used for state management in React. It is suitable for handling more complex
state logic compared to useState.
Can you use useReducer with complex state
objects?
How do you pass additional arguments to the reducer
function?
How do you handle side effects with
useReducer?
What is useRef
hook ?
The useRef hook is used to access and interact with DOM
elements directly and to persist mutable values across renders
without causing re-renders.
How can useRef be used to store mutable
values?
useRef can store any mutable value, and changes to the ref do not
cause re- renders.
What is forwardRef and when would you
use it?
forwardRef is a function that allows you to pass refs through
components to access DOM elements or child component instances.
How to manage forms in
react ?
Forms in React can be managed using controlled components where form
data is handled by the component's state.
What are Custom Hooks and Why Do We
Need Them?
Custom Hooks in React are JavaScript functions that allow you to reuse
stateful logic across multiple components. They enable you to extract and
share common logic without repeating code, promoting code reusability and
separation of concerns.

Code Reusability: Custom hooks allow you to reuse stateful logic

without duplicating code.
Separation of Concerns: They help separate the logic from the
component's structure, making the code more modular and easier to
maintain.
Cleaner Code: By moving common logic into custom hooks, components
become cleaner and more focused on their core responsibilities.
Implement useFetch custom hook/Custom hook
example ?
Implement useWindowResize
custom hook
What is React Router DOM and why is it
used?
React Router DOM is a routing library built on top of
React Router. It enables dynamic routing in web
applications, allowing you to define routes and
navigate between different components without
reloading the page.
How do you create a basic route in React
Router DOM?
A basic route is created using the Route component, which maps a URL path
to a specific element
How to implement basic routing using react
router dom ?
How to create a link to another route using React
Router DOM?
Use the Link component to create navigation
links.
How do you use URL parameters / Dynamic routing in
React Router DOM?
How can you perform a redirect in React
Router DOM?
Use the Navigate component to perform a
redirect.
What is a Routes component in React Router
DOM ?
The Routes component is used to define a set of routes, where only the
first matching route is rendered.
How do you handle nested routes in React
Router DOM?
How can you handle 404 errors (not found) in React
Router DOM ?
Use a Route without a path prop inside Routes to catch all unmatched
routes.
How do you programmatically navigate using React
Router DOM ?
Use the useNavigate hook to navigate programmatically within your
components.
Explain useCallback hook with
example.
The useCallback hook is used to memoize callback functions. This means that the function
provided to useCallback will only be recreated if one of its dependencies has changed. This is
particularly useful when passing callbacks to child components that are optimized with
React.memo, as it can prevent unnecessary renders.
Explain useMemo hook with
example.
The useMemo hook is used to memoize expensive calculations so that they are not
recalculated on every render. It takes a function to compute a value and an array of
dependencies, and it only recomputes the value when one of the dependencies has changed.
Explain React.memo with
example.
React.memo is a higher-order component that memoizes the result of a component. It
prevents the component from re-rendering unless the props have changed. This is useful
for optimizing performance by avoiding unnecessary renders of pure components.
Explain the reconciliation process in React and how
it works.
Reconciliation is the process React uses to update the DOM efficiently. It
involves comparing the new virtual DOM with the previous one and
determining the minimum number of changes needed to update the actual
DOM.
What are Pure
components ?
PureComponent is a base class in React that implements shouldComponentUpdate with a
shallow prop and state comparison. It helps prevent unnecessary re-renders by ensuring
that the component only re-renders when there are actual changes in props or state.
Explain higher order component with
example.
A Higher-Order Component
(HOC) is a function that takes
a component and returns a
new component with added
functionality. HOCs are used
for reusing component logic
and enhancing components
with additional behavior.
What is redux , explain core
principles.
Redux is a predictable state container for JavaScript apps. Redux acts
as a centralized store for state management in your application.

Single Source of Truth: The state of the application is stored in a single

object. State is Read-Only: The only way to change the state is to emit
an action, an object describing what happened.
Changes are made with Pure Functions: Reducers are pure functions that
take the previous state and an action, and return the next state.
What are actions in Redux, explain with
example?
Actions are plain JavaScript objects that describe what happened in the
application. They must have a type property that indicates the type of
action being performed.
Explain reducers in Redux with an
example.
Reducers are pure functions that take the current state and an action, and
return a new state based on the action type.
What is the role of the Redux
store?
The store holds the whole state tree of the application. It allows access to
the state via getState(), dispatching actions via dispatch(action), and
registering listeners via subscribe(listener).
How do you connect React components to Redux store using
connect?
The connect function connects a React component to the Redux store. It
maps state and dispatch to the component's props.
How do you use the useSelector and useDispatch hooks in a
functional React component?

useSelector is used to access the Redux state, and useDispatch is

used to dispatch actions in functional components.
What is Redux
Toolkit?
Redux Toolkit is an official, opinionated toolset for efficient Redux
development. It simplifies store setup, reduces boilerplate, and includes
useful tools like createSlice and createAsyncThunk.
How to configure store in redux
toolkit ?
Redux Toolkit is an official, opinionated toolset for efficient Redux
development. It simplifies store setup, reduces boilerplate, and includes
useful tools like createSlice and createAsyncThunk.
Explain createSlice in Redux Toolkit with an
example.
createSlice is a function that generates action creators and action types,
and creates a reducer based on an object of "slice" reducers.
What are controlled components in
React?
Controlled components are React components where the form data is
handled by the React state. The input's value is always driven by the
React state.
What are uncontrolled components in
React?
Uncontrolled components are React components where the form data is
handled by the DOM itself. The input's value is not driven by the React
state.
How do you optimize performance in React
applications?

Using useMemo and useCallback to memoize

expensive calculations and functions.
Implementing shouldComponentUpdate or
using React.memo for Pure Components.
Code splitting and lazy loading.
What is code splitting in
React?
Code splitting is a feature supported by React that allows you to split your
code into various bundles which can then be loaded on demand.
What are render props in React? Give an
example.

Render props are a

technique for sharing code
between React components
using a
prop whose value is a
function. This function
returns a React element and
is used
by the component to
What are portals in
React?
Portals provide a way
to render children into
a DOM node that
exists outside the
DOM hierarchy of the
parent component.
This is useful for
things like modals,
tooltips, and overlays.
How do you implement lazy loading in
React?

Lazy loading in React

can be implemented
using the React.lazy
and Suspense
components. This allows
you to load components
on demand, improving
initial load times.
How do you define props for a functional component in
TypeScript?
How do you use the useState hook with
TypeScript?

We can define the

type of the state
variable by
specifying it in the
useState generic.
How do you type event handlers in React with
TypeScript?
How do you handle optional props in React components with
TypeScript?
In TypeScript, you can handle optional props by using the ? operator in the
props interface or type alias.
How do you use the useReducer hook with
TypeScript?
How do you type the context API in React with
TypeScript?
How do you write a simple test in
Jest?
Jest is a JavaScript testing framework maintained by Facebook. It is
commonly used with React because it provides a simple and powerful
testing solution with features like snapshot testing, coverage reporting,
and built-in assertions.
How do you render a component for testing using React Testing
Library?
How can you find elements in the DOM using React
Testing Library?
How do you simulate user events in React Testing
Library?
How can you test component props with React Testing
Library?
Create a Controlled Input
Component
Build a controlled component called TextInput that renders an input field and a button.
When the button is clicked, an alert should display the current input value.
Implement toggle Visibility of a
Component
Fetch Data from an API and Display it , along with loading
state
Create a Reusable Button Component with
Props
Build a Component that Uses an Effect to Perform
Cleanup.
Implement a Context with a Reducer for Global State
Management
Build a Component with Conditional Rendering Based on
Props.
Implement a simple form
component