General React Knowledge:

1. What is React, and why is it used in web development?
   1. React is a JavaScript library for building user interfaces. It is used in web development to create dynamic, interactive, and reusable UI components. React allows developers to efficiently update and render parts of a web page, making it fast and responsive.
2. Explain the concept of virtual DOM in React.
   1. The virtual DOM is a lightweight representation of the actual DOM (Document Object Model) in memory. React uses the virtual DOM to perform efficient updates. When there's a change in the application's state, React creates a new virtual DOM tree, compares it to the previous one, and then updates only the parts of the real DOM that have changed. This process minimizes DOM manipulation and leads to improved performance.
3. What are the key differences between React Class Components and Functional Components?
   • Class Components: They use ES6 classes and have a lifecycle with methods like render(), componentDidMount(), etc. They can hold and manage local component state.
   • Functional Components: They are JavaScript functions and are simpler to write. With the introduction of hooks, functional components can now manage state and have lifecycle-like behavior with hooks like useEffect().
4. How do you pass data from a parent component to a child component in React?
   1. Data can be passed from a parent to a child component through props. The parent component includes the child component and provides data as attributes in the JSX, which the child component can access via its props.
5. What is JSX, and how does it differ from regular JavaScript?
   1. JSX (JavaScript XML) is a syntax extension for JavaScript often used in React. It allows you to write HTML-like code within JavaScript. JSX gets transpiled into regular JavaScript using tools like Babel before being executed in the browser.

Component Lifecycle:

1. Describe the different lifecycle methods in a React component. How are they useful?
   1. 1. Common lifecycle methods include
      2. componentDidMount()
      3. componentDidUpdate()
      4. componentWillUnmount(). They are useful for managing side effects, fetching data, and updating the UI in response to changes in state or props.
2. How does the useEffect hook work, and why is it used in functional components?
   1. useEffect is a hook used in functional components to perform side effects in a way that's similar to lifecycle methods. It takes a function and runs it after the component has rendered. It's used for tasks like data fetching, setting up subscriptions, or manually changing the DOM.
3. Explain the difference between componentDidMount and useEffect with an empty dependency array.

   1. componentDidMount is a lifecycle method in class components that runs once after the component has mounted. useEffect with an empty dependency array in functional components achieves the same behavior; it runs the provided function once after the initial render when the component is mounted.

      However, useEffect runs on runs after the paint has been committed to the screen as opposed to before. This means you would get a flicker if you needed to read from the DOM, then synchronously set state to make new UI.

      useLayoutEffect was designed to have the same timing as componentDidMount

State Management:

1. What is the purpose of the useState hook? Provide an example of how to use it.

   1. useState is a hook used for managing component state in functional components. It returns an array with the current state value and a function to update it. Here's an example:

      const [count, setCount] = useState(0);
      

2. What is Redux, and when would you use it in a React application?

   1. Redux is a state management library for React (and other JavaScript frameworks). It is used when you need to manage complex application state that needs to be shared across multiple components or when your application state logic becomes too complex to manage with local component state alone.

3. How does data flow in a Redux application?

   1. In Redux, data flows in a unidirectional manner:
      1. Components dispatch actions.
      2. Actions are processed by reducers, which update the application's state.
      3. Updated state is provided to connected components, triggering re-renders.

4. Describe the differences between local component state and Redux state.

   • Local Component State: Scoped to a single component, not shared with others. Managed using useState or this.state in class components.
   • Redux State: Shared across multiple components, managed globally by Redux. Accessed via Redux store and updated through actions and reducers.

5. What is the difference between Redux and context api?

   1. Route parameters allow you to capture dynamic values from the URL. For example, in a route like /users/:id, :id is a route parameter, and the value can be accessed in the component associated with the route.

6. Give an example for routing

Routing: