Frequently Asked
Questions

The Virtual DOM is a lightweight in-memory representation of the actual DOM elements. React uses it to improve performance by minimizing direct manipulation of the actual DOM. Changes are first made to the Virtual DOM, and then React efficiently updates the actual DOM based on the differences.

JSX (JavaScript XML) is a syntax extension for JavaScript recommended by React. It allows the mixing of HTML-like tags within JavaScript code, making it easier to write and understand React components.

Functional components are stateless and are just JavaScript functions that take props as arguments and return React elements. Class components, on the other hand, can have state and lifecycle methods, providing more features than functional components.

Props (short for properties) are used to pass data from a parent component to a child component in React. They are read-only and help in maintaining the unidirectional flow of data in a React application.

State is a mechanism for a component to maintain and manage its internal data. Unlike props, which are passed down from parent to child components and are read-only, state is managed within the component and can be updated using setState().

The component lifecycle in React consists of three main phases: Mounting, Updating, and Unmounting. Each phase has lifecycle methods that are called at different points, such as componentDidMount, shouldComponentUpdate, and componentWillUnmount.

The componentDidMount method is called after a component has been rendered to the DOM. It is commonly used to perform actions that require interaction with the DOM, such as data fetching, subscriptions, or manually changing the DOM.

Lifting state up is a pattern in React where the state of a child component is moved to its parent component. This is done to share the state between multiple components and maintain a single source of truth.

React Hooks are functions that let you use state and lifecycle features in functional components. They were introduced in React 16.8 to allow functional components to have local state and lifecycle methods, making them equivalent to class components.

React applications often use a library called React Router for routing. It allows the creation of navigation between different components or pages in a React application without a full page reload. The <Route> component is commonly used to define routes and render components based on the current URL.

The Link component is used in React Router to create navigation links. It prevents the default behavior of a traditional anchor (<a>) tag, allowing for client-side navigation without a full page reload.

Redux is a state management library for JavaScript applications, including React. It provides a predictable state container and helps manage the state of the entire application in a centralized store. Redux is beneficial for complex applications with a lot of shared state or when state management becomes challenging.

• Actions: Actions are plain JavaScript objects that represent events in the application. They contain a type property that describes the type of action being performed.
• Reducers: Reducers are pure functions that take the current state and an action as arguments and return a new state. They define how the state should change in response to an action.

Jest is a JavaScript testing framework that is commonly used for testing React applications. It provides a test runner, assertion library, and mocking capabilities. Jest is often used in conjunction with tools like Enzyme for testing React components.

Snapshot testing is a testing technique where a snapshot of the component's rendered output is saved. On subsequent test runs, the current output is compared to the saved snapshot to detect unexpected changes. It helps in identifying unintended changes in the component's appearance.