Why do we use React Router Dom?

React Router Dom is used for handling navigation and routing in React applications. It enables the
creation of single-page applications (SPAs) by allowing components to render based on the URL.

What is BrowserRouter? Where do we use them?

BrowserRouter is a type of router provided by React Router Dom. It uses the HTML5 history API to
keep UI in sync with the URL. It is typically used at the top level of the application to provide routing
functionality.

What are Routes and Route in React Router Dom?

Routes is a component that wraps a set of Route components. Route is used to define a mapping
between a URL path and the component that should be rendered when the path is matched.

What is the path prop in Route?

The path prop in Route specifies the pathname that the route matches. It can include parameters to
capture dynamic segments of the URL.

What is the element prop in Route?

The element prop in Route is used to specify the React element to render when the route matches.

What is Link in React Router Dom?

Link is a component provided by React Router Dom for creating links in the application. It prevents
the default behavior of a traditional anchor (<a>) tag and allows the application to navigate without a
full page reload.

What is useParams() in React Router Dom?

useParams() is a hook in React Router Dom that returns an object of key/value pairs of URL
parameters. It is used to access the dynamic segments of the current URL.

How to do dynamic routing using React Router Dom?

Dynamic routing in React Router Dom involves defining dynamic segments in the route path using :
and then using useParams() to access the values of those segments.

What happens if we give '*' in the prop of Route?

If * is used as the path in a Route, it acts as a wildcard, matching any pathname. It is often used for
creating a fallback or 404 page.

What is useNavigate in React Router Dom?

useNavigate is a hook provided by React Router Dom for programmatically navigating between pages.
It returns a function that you can call with the desired location to navigate.

What is useEffect?
useEffect is a hook in React that allows performing side effects in functional components. It is used for
tasks like data fetching, subscriptions, manual DOM manipulations, and more.

What is a side effect?

A side effect in React refers to any action that is performed in a component that does not directly
relate to rendering. This includes tasks like data fetching, updating the DOM, or interacting with
external APIs.

How to make useEffect work only the first time the page renders?

You can make useEffect run only once by passing an empty dependency array ([]) as the second
argument to it.

How to make useEffect work when a specific state changes?

You include the state variable that you want to watch in the dependency array. useEffect will then run
whenever that specific state changes.

What is clean up in useEffect?

Clean up in useEffect involves canceling subscriptions, clearing intervals, or performing any necessary
cleanup before the component is unmounted. This is done in the function returned by useEffect.

How to make useEffect work when a page renders every time?

Omit the dependency array or include all the variables that the effect depends on in the dependency
array. This causes useEffect to run on every render.

Can we add multiple useEffect in a component?

Yes, you can add multiple useEffect hooks in a component, each handling different side effects or
subscriptions.

What is Context API?

The Context API is a feature in React that allows the sharing of state between components without
explicitly passing props through every level of the component tree.

What is props drilling?

Props drilling occurs when you need to pass data through several layers of components by sending
props from one component to another, even if the intermediate components do not need the data.

How to create a context?

You create a context using createContext() from the react module. For example: const MyContext =
React.createContext();

How to share states using Context API?

You provide a value to the context provider, and any component within the provider's subtree can
access that value using useContext hook.
What is the value prop in Context API?

The value prop in the context provider is used to set the value that will be shared with all the
components within the provider's subtree.

How to get the value from Context API?

You can use the useContext hook to get the value from the context in a functional component.

What are batch updates in React?

Batch updates in React refer to the mechanism by which multiple state updates or renderings are
grouped together to optimize performance. React batches updates to minimize the number of
renders.

What is previous state in useState?

The previous state in useState is the state value before the most recent update. It can be obtained
using the callback form of setState.

What is useReducer?

useReducer is a hook in React that is used for managing complex state logic in a component. It takes a
reducer function and an initial state as arguments.

What's the difference between useReducer and useState?

While both manage state, useReducer is preferable for complex state logic where the next state
depends on the previous one. useState is simpler and suitable for independent state updates.

What is dispatch in useReducer?

dispatch is a function returned by useReducer that is used to trigger a state change. It takes an action
as an argument.

What is the reducer function in useReducer?

The reducer function in useReducer is responsible for specifying how the state should change in
response to different actions. It takes the current state and an action as parameters.

What is a React element?

A React element is a lightweight representation of a DOM element. It is a plain JavaScript object that
describes what you want to see on the screen.

What is a React component?

A React component is a reusable, self-contained piece of UI that can be composed together to build
complex user interfaces.

On what basis does a component render?

A component renders when its state or props change. React compares the previous and current
states/props and updates the component if there are differences