React&Redux

**React Questions**

1. What is React?

React is a JavaScript library for building user interfaces, primarily used for creating single-page applications with a component-based architecture, allowing developers to build reusable UI components.


2. What are the features of React?

Key features of React include:
- Component-Based Architecture: Encourages building encapsulated components that manage their own state.
- Virtual DOM: Optimizes rendering by updating only the parts of the DOM that have changed.
- Unidirectional Data Flow: Makes state management more predictable and debugging easier.
- JSX: Syntax extension for JavaScript that allows writing HTML directly within JavaScript.


3. What are the advantages of using React?

- Performance: Virtual DOM optimizes updates, improving performance.
- Reusable Components: Encourages modularity and reusability, reducing redundancy.
- Strong Community Support: Backed by Facebook, with a vast ecosystem and community support.
- SEO-Friendly: Server-side rendering improves SEO for React apps.
- Ease of Integration: Can be used with other libraries and frameworks.


4. What is JSX in React?

JSX stands for JavaScript XML. It is a syntax extension that allows you to write HTML elements and components in JavaScript. 
JSX makes it easier to visualize the structure of the UI and integrates with the React component system seamlessly.


5. What is the Virtual DOM in React?

The Virtual DOM is an in-memory representation of the real DOM elements generated by React components. 
React uses the Virtual DOM to efficiently update the real DOM by only re-rendering elements that have changed, reducing the performance overhead of direct DOM manipulation.


6. How does the Virtual DOM work?

React creates a Virtual DOM tree to keep track of changes to the UI. 
When a component's state or props change, React updates the Virtual DOM and calculates the difference between the current and previous states, applying only the necessary updates to the real DOM.


7. What are components in React?

Components are the building blocks of a React application. They encapsulate the UI and logic for a part of the application and can be reused across different parts of the application. Components can be either functional or class-based.


8. What is the difference between functional and class components?

- Functional Components: Stateless components defined as functions. They use hooks for state and lifecycle management.
- Class Components: Stateful components defined as ES6 classes. They use `this.state` and lifecycle methods for managing state and side effects.


9. What are hooks in React?

Hooks are functions that let you use React state and lifecycle features in functional components. Common hooks include `useState`, `useEffect`, and `useContext`, allowing functional components to manage state and side effects similarly to class components.


10. What is the use of the `useState` hook?

`useState` is a hook that allows functional components to have state variables. It returns an array with two elements: the current state and a function to update it.

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

11. What is the `useEffect` hook?

`useEffect` is a hook for managing side effects in functional components. It can be used for data fetching, subscriptions, and manual DOM updates, replacing lifecycle methods like `componentDidMount` and `componentDidUpdate`.

```jsx
useEffect(() => {
    // Side effect logic
}, [dependencies]);
```


12. What is the difference between state and props in React?

- State: Managed within a component, mutable, and used to hold data that may change over time.
- Props: Passed to components from their parents, immutable, and used to pass data and event handlers down the component tree.


13. What is the purpose of the `key` prop in React?

The `key` prop helps React identify which elements have changed, are added, or are removed, enabling efficient updates and maintaining element identity across re-renders. Keys should be unique among siblings.


14. What is the difference between a controlled and an uncontrolled component?

Controlled Components: Form elements whose value is controlled by React state. The form data is handled by the component's state.
Uncontrolled Components: Form elements that manage their own state via the DOM, accessed using refs.


15. What are refs in React?

Refs provide a way to access DOM nodes or React elements directly, allowing manipulation of the DOM without relying on React's data flow. They are created using `React.createRef` or the `useRef` hook.


16. What is the purpose of `shouldComponentUpdate`?

`shouldComponentUpdate` is a lifecycle method in class components used to optimize rendering performance by allowing conditional re-rendering. It returns a boolean indicating whether a component should update.


17. What are higher-order components (HOCs) in React?

HOCs are functions that take a component and return a new component with enhanced capabilities. They are used to reuse component logic, manage cross-cutting concerns, and abstract stateful behavior.


18. What is the difference between `React.Component` and `React.PureComponent`?**

- `React.Component`: The base class for class components. Does not perform shallow comparison by default.
- `React.PureComponent`: Extends `React.Component` and implements `shouldComponentUpdate` with a shallow comparison of props and state to prevent unnecessary re-renders.

---

19. What is `React.Fragment` used for?

`React.Fragment` is used to group a list of children elements without adding extra nodes to the DOM. It allows multiple elements to be returned from a component without wrapping them in an additional DOM element.

```jsx
<React.Fragment>
    <Child1 />
    <Child2 />
</React.Fragment>
```


20. What is the difference between `createElement` and `cloneElement` in React?

- `createElement`: Creates a new React element with specified props and children.
- `cloneElement`: Clones an existing React element, allowing you to modify props and children.


21. What is the significance of `React.StrictMode`? 

`React.StrictMode` is a tool for highlighting potential issues in an application. It activates additional checks and warnings for its descendants, helping developers ensure best practices.


22. What is `React.memo` and how does it work?

`React.memo` is a higher-order component that memoizes a functional component, preventing re-renders if props have not changed. It optimizes performance by avoiding unnecessary updates.


23. How does event handling work in React?

Event handling in React uses camelCase syntax and passes functions as event handlers instead of strings. Events are managed by synthetic events, a cross-browser wrapper around native events.

```jsx
<button onClick={handleClick}>Click Me</button>
```


24. What is context in React?

Context provides a way to pass data through the component tree without explicitly passing props down at every level. It is used for global state, theming, and managing authenticated users.


25. How do you create context in React?

Context is created using `React.createContext`, providing a default value. Components use `Provider` to supply context values and `Consumer` or the `useContext` hook to consume them.

```jsx
const MyContext = React.createContext(defaultValue);
```


26. What is the purpose of `useReducer` hook?

`useReducer` is a hook that provides an alternative to `useState` for managing complex state logic. It is similar to Redux in that it uses a reducer function and an initial state to handle state updates.

```jsx
const [state, dispatch] = useReducer(reducer, initialState);
```


27. What is lazy loading in React?**

Lazy loading is a technique for loading components or resources as needed, rather than all at once, reducing the initial load time. React supports lazy loading components using `React.lazy` and `Suspense`.



28. What is `React.Suspense` used for?**

`React.Suspense` is used to wrap components that load asynchronously with `React.lazy`. It provides a fallback UI, such as a loading spinner, while waiting for the component to load.


29. What is the role of `getDerivedStateFromProps` lifecycle method?**

`getDerivedStateFromProps` is a static lifecycle method used to derive state from props before rendering. It is used to update state based on changes to props.


30. How does error boundaries work in React?

Error boundaries are React components that catch JavaScript errors in their child component tree, log them, and display a fallback UI instead of the crashed component tree. They use `componentDidCatch` and `getDerivedStateFromError` methods.


**Redux Questions**

31. What is Redux?

Redux is a predictable state management library for JavaScript applications, providing a centralized store to manage application state, with unidirectional data flow and a strict separation between state and UI.


32. What are the core principles of Redux?

The core principles of Redux are:
- Single Source of Truth**: The state is stored in a single object tree within a single store.
- State is Read-Only: The state is immutable and can only be changed through actions.
- Changes are Made with Pure Functions: Reducers are pure functions that determine how the state changes in response to actions.


33. What is an action in Redux?

An action is a plain JavaScript object that represents an intention to change the state. It typically contains a `type` field and may include additional data payloads.


34. What is a reducer in Redux?

A reducer is a pure function that takes the current state and an action as arguments and returns a new state. Reducers specify how the state should change in response to actions.


35. What is a store in Redux?

The store is a central place that holds the entire application state in Redux. It provides methods to access the state, dispatch actions, and register listeners for state changes.


36. What is middleware in Redux?

Middleware in Redux is a way to extend the store's capabilities by providing third-party extensions. It allows handling asynchronous actions, logging, routing, and more by intercepting dispatched actions.


37. What is Redux Thunk?

Redux Thunk is a middleware that allows you to write action creators that return functions instead of plain objects, enabling the dispatching of asynchronous actions and conditional logic.


38. What is the `connect` function in Redux?

The `connect` function is a higher-order function that connects a React component to the Redux store, allowing the component to access state and dispatch actions via props.


39. How do you update state in Redux?

State in Redux is updated by dispatching actions to reducers, which specify how the state should change based on the action type and payload.


40. What is the difference between `mapStateToProps` and `mapDispatchToProps`?

- `mapStateToProps`: Maps state from the Redux store to component props, allowing components to access and display state.
- `mapDispatchToProps`: Maps dispatchable actions to component props, enabling components to dispatch actions.

---

41. What is the `Provider` component in Redux?**

The `Provider` component is a React component that makes the Redux store available to the entire component tree below it, allowing components to connect to the store.


42. What is Redux Saga?

Redux Saga is a middleware library for managing side effects in Redux applications. It uses generator functions to handle asynchronous operations like data fetching, making the code easier to test and maintain.


43. How do you handle asynchronous actions in Redux?

Asynchronous actions in Redux are handled using middleware like Redux Thunk, Redux Saga, or Redux Observable, which allow for dispatching functions that can perform async operations and dispatch additional actions.


44. What is the `combineReducers` function in Redux?

`combineReducers` is a utility function that combines multiple reducer functions into a single reducing function, enabling the management of different slices of state.


45. What is `reselect` in Redux?

`reselect` is a library for creating memoized selectors, which compute derived state from the Redux store's state, improving performance by preventing unnecessary recalculations.


46. What is the difference between Redux and Context API?

Redux is a state management library with a structured architecture and middleware support, ideal for complex applications. Context API is built into React for passing data through the component tree, suitable for simpler state management needs.


47. What is the purpose of `redux-devtools`?

`redux-devtools` is a tool for debugging Redux applications, allowing developers to inspect actions, state changes, and time-travel through state updates, making it easier to track and debug application state.


48. How does the Redux DevTools extension work?

The Redux DevTools extension connects to the Redux store and listens for state changes and actions. It provides an interface for visualizing and inspecting the Redux state and action history.


49. How do you persist state in Redux?

State persistence in Redux can be achieved using libraries like `redux-persist`, which automatically saves and rehydrates the Redux state to and from local storage or other storage mediums.


50. What is the purpose of Redux Toolkit?

Redux Toolkit is an official, opinionated set of tools for efficient Redux development, providing utilities for simplifying store setup, reducing boilerplate, and encouraging best practices.