Why we use react instead of others frameworks?
    React is popular because of its component-based architecture, efficient Virtual DOM, unidirectional data flow, React Native for mobile development, a large ecosystem, and a developer-friendly syntax. It offers code re-usability, improved performance, easier debugging, and a wide range of community support

Can you tell me the architecture of react?
    React's architecture is based on components, a virtual representation of the DOM (Virtual DOM), and a unidirectional data flow. Components are reusable and represent parts of the UI. The Virtual DOM allows efficient updates by calculating minimal changes needed. JSX is used for declarative UI definition. Data flows from parent to child components through props, and class components have lifecycle methods for managing behavior.

What are the features of React?

  1. JSX
  2. Reusable components
  3. Virtual DOM
  4. One way data binding
  5. Server side rendering

What is the One way data binding?
    where changes in the state update the view but the view changes do not affect the state.

What is the Two way data binding?
    where changes in the view also update the state. We can achieve two way data binding in react by using state and props

What is DOM?
    The DOM is a programming interface that represents the structure of a web page as a tree-like structure. It allows developers to manipulate and interact with elements on a web page using programming languages like JavaScript

What is virtual DOM?
    When the state of an object changes, virtual DOM changes only that object in the real DOM, rather than updating all the objects.

What is React DOM?
    For rendering the UI to the browser, we have to use react-dom. React-dom renders components or JSX elements to the DOM.
    Methods:
    render() - renders a piece of JSX into a browser DOM node.
    findDOMNode() - finds the browser DOM node for a React class component instance.
    unmountComponentAtNode() - removes a mounted React component from the DOM.
    hydrate() - It is equivalent to the render() method but is implemented while using server side rendering.
    createPortal() - lets you render some children into a different part of the DOM.

What is React Router DOM?
    It allows you to create routes and map them to specific components that should be rendered when the router is accessed.
    Overview of the main components and concepts are
    <BrowserRouter> - wraps the entire application and provides the routing context
    <Switch> - Renders the first child <Route> that matches the current URL
    <Route> - Define a route and component that should be rendered when the router matches the route.
    <Link> - Generates an HTML anchor tag with a href.

Difference between State and Props in react?  
    State holds information about the components. State is mutable and It can be changed. Child components can not access and stateless components can not have state.
    Props allows to pass data from one component to another component as an argument. Props are immutable and readonly. Child components can access and stateless components can have props.

What is Props drilling in react?
    "Props drilling" in React refers to the process of passing data (props) through multiple levels of nested components to reach a deeply nested child component that requires that data. It can lead to code complexity and reduced readability, and in such cases, you may want to consider using React Context or state management libraries like Redux to data sharing in your application.

what is the purpose of fragment tag in react?
    The primary purpose of the fragment tag, which is usually written as <>...</>, or <React.Fragment>...</React.Fragment>, is to avoid unnecessary wrapper elements when you need to return multiple elements from a component.
1. Avoid Extra DOM Nodes
2. Cleaner JSX
3. Improved Performance
4. No Styling Interference

Difference between props and Render props in react?
    "Props" is the standard way to pass data to child components in React, primarily used for static data and configuration.
    "Render Props" is a design pattern that involves passing a function as a prop, allowing dynamic behavior to be injected into a component, often used for     sharing complex behavior or logic.

What components are there in React, and what do they mean?
    It splits the user interface into independent, reusable parts that can be processed separately.
    Stateless Functional Components:
        These types of components have no state of their own and only contain render methods, and therefore are also called stateless components. They may derive data from other components as props (properties).

    Stateful Class Component:
        These types of components can hold and manage their own state and have a separate render method to return JSX on the screen. They are also called Stateful components as they can have a state.

What is controlled components?
In a controlled component, form data is handled by a React component(e.g., input, textarea, select).
Key characteristics of controlled components:

  1. State-Controlled Value
  2. Handler Functions

What is Uncontrolled components?
In a uncontrolled components, where form data is handled by the DOM itself.
Key characteristics of uncontrolled components:

  1. DOM Handles the Value
  2. Ref Usage
  3. Simple and Lightweight

What is called super method in class component?
    It is used to call the constructor of its parent class.
    
Difference between super vs super(props)?
    When you want to access this.props in the constructor.

What is a constructor in class component?
    It is a method that’s automatically called during the creation of an object from a class.
    It is used for initializing the local state of the component by assigning an object to this. state.
    It is used for binding event handler methods that occur in your component. 

What are the lifecycle methods in react?
Mounting: Component creation and initial rendering.
Updating: Component re-rendering due to state or prop changes.
Unmounting: Component removal from the DOM.
    When to use unmounting:

  1. Removing event listeners
  2. Clear timers
  3. Cleanup external resources
  4. Cleanup after effects

What are the life cycle methods are used in Class Component?

  1. componentDidMount: It runs after the component output has been rendered to the DOM.
  2. componentDidUpdate: It runs after the component is updated in the DOM.
  3. componentWillUnmount: It runs before the component is destroyed or unmounted from the DOM. 

What is Hooks in react?
Hooks is a function that allows functional components to change the state and other react features.
and the Hooks methods are in the below:
1. useState - It allows you to access state in a functional component.

2. useEffect - It allows you to perform fetching data, updating DOM, and timers

3. useContext - to manage state globally.

4. useRef - It allows you to persist values between renders.

5. useReducer - similar to useState. But it allows for custom state logic.

6. useMemo - useMemo and useCallback both are the same, the only difference is that useMemo returns a memoized value. useCallback returns a memoized function.

7. useCallback - to prevent a component from re-rendering unless its props have changed.

8. custom Hooks - we can create a custom hooks by using "use" keyword with your function name (e.g useFetch).

What is Context API in react?

  1. It is easy to use for simple state sharing between components.
  2. Recommended for small to medium-sized applications with limited state complexity.
  3. No external dependencies required as it is part of React.
  4. State changes trigger re-renders in all components that consume the context.
  5. Suitable for avoiding prop drilling.

Explain the Redux architecture in react?

  • Every React application has a single Store that contains State.
  • State is an object used to define UI components.
  • Actions with type and payload are triggered in the UI.
  • Actions call for Reducer to update the Store.

What is the use of Provider in  react?
    <Provider> component makes the Redux store available to any nested components that need to access the Redux store.

What is the use of React.memo in react?
    React.memo is a HOC used to optimize functional components. It re-renders the component only if its props have changed.