React Basics

1. What is ReactJS and how does it work?

ReactJS is a JavaScript library for building user interfaces, primarily single-page applications where you need a fast, interactive experience. It allows developers to create large web applications that can update and render efficiently in response to data changes. React works by using a component-based architecture. Components are self-contained modules that render some output based on their state and props.

2. What is the difference between Shadow DOM and Virtual DOM?

• Shadow DOM: A browser technology used primarily for encapsulation. It allows you to keep the styles and scripts isolated to a particular component. use in Angular.

• Virtual DOM: A concept in React where a virtual representation of the UI is kept in memory and synced with the real DOM using a process called reconciliation. This makes updates faster and more efficient.
  
  
  

3. Explain the reconciliation process.

Reconciliation is the process by which React updates the DOM. When a component’s state or props change, React creates a new Virtual DOM tree and compares it to the previous one. It calculates the minimum number of changes needed and updates only those parts of the actual DOM. This process is called "diffing."

4. What is the meaning of component in React?

A component in React is a reusable, self-contained piece of code that defines a part of the user interface. Components can be functional (stateless) or class-based (stateful) and can accept inputs (props) and maintain internal state.

5. What is state and props in React?

• State: An object that holds the component’s dynamic data and determines its behavior and rendering. State is managed within the component and can change over time.

• Props: Short for properties, props are read-only attributes that are passed from parent components to child components to configure them or pass data.

6. What are pure components and React.memo()?

• Pure Components: A type of React component that implements a `shouldComponentUpdate` method with a shallow prop and state comparison to avoid unnecessary re-renders.

• React.memo(): A higher-order component that wraps a functional component to prevent it from re-rendering unless its props change. It's similar to PureComponent but for functional components.

7. What are the different phases of the component lifecycle?

React components go through several phases:

1. Mounting: When the component is being created and inserted into the DOM. Methods: `constructor()`, `componentDidMount()`.
2. Updating: When the component is being re-rendered due to changes in state or props. Methods: `componentDidUpdate()`, `shouldComponentUpdate()`.
3. Unmounting: When the component is being removed from the DOM. Method: `componentWillUnmount()`.

8. What are Higher Order Components?

Higher Order Components (HOCs) are functions that take a component and return a new component. HOCs are used for reusing component logic. For example, they can be used to inject additional props or to wrap a component with additional functionality.

9. What is context and useContext hook?

• Context: A way to pass data through the component tree without having to pass props down manually at every level. It's useful for global data like themes or user authentication.

• useContext Hook: A React hook that lets you subscribe to React context without introducing nesting. It provides a way to access context directly in functional components.

10. Why should we not update the state directly?

Directly updating the state can lead to inconsistencies and bugs because React uses state updates to determine when to re-render components. Instead, you should use `setState` to ensure React properly manages and schedules the updates. The setState() method in React is indeed an asynchronous operation.

11. What is the use of refs, React.createRef and useRef?

• Refs: Used to access DOM elements directly within a React component.

• React.createRef: Used to create a ref in class components.

• useRef: A React hook that creates a mutable ref object in functional components. This object persists across re-renders.

12. What are forward refs?

Forward refs are a technique for passing a ref through a component to one of its child components. This is useful when you need to access a child component's DOM node from a parent component.

13. What is React Fiber?

React Fiber is a reimplementation of React’s core algorithm. It aims to improve the rendering performance of React applications by enabling React to split rendering work into chunks and spread it out over multiple frames. This makes it possible for React to pause, abort, or reuse work as necessary.

14. What are uncontrolled components?

Uncontrolled components are those that store their own state internally within the DOM. Instead of using React state to manage form data, we use refs to read the form data when we need it.

15. What are controlled components?

Controlled components are form elements whose values are controlled by React state. This means the form data is handled by the React component, and update the state on every change to keep it in sync.

16. How to apply validation on props in React?

Prop validation in React can be done using `PropTypes`. You import `PropTypes` from the 'prop-types' package and define the expected types and requirements of props for your component.

17. What is children prop?

The `children` prop is a special prop in React that allows you to pass components or elements between the opening and closing tags of a component. This is useful for creating reusable container components.

18. How do I make an AJAX call in React and when should I do it in the component's lifecycle?

You can make AJAX calls in React using libraries like Axios or the Fetch API. It's best to make these calls in the `componentDidMount()` lifecycle method or the `useEffect` hook for functional components. This ensures the call is made after the component has mounted and avoids potential issues with unmounted components.

19. What are React hooks?

React hooks are functions that let you use state and other React features in functional components. Common hooks include `useState` for state management, `useEffect` for side effects, and `useContext` for context access.

20. What are error boundaries?

Error boundaries are React components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI. They are implemented using the `componentDidCatch` lifecycle method and the `getDerivedStateFromError` method.

21. What is the use of react-dom package?

The `react-dom` package provides DOM-specific methods that allow React to interact with the DOM. It includes methods like `ReactDOM.render` for rendering React components into the DOM and `ReactDOM.createPortal` for creating portals.

22. Can you force a component to re-render without calling setState?

Yes, you can force a re-render using `forceUpdate` in class components. However, this is generally discouraged because it goes against React’s data-driven approach. It's better to update the state to trigger re-renders.