Explain the concept of virtual DOM in React. How does it improve performance?
The virtual DOM is a lightweight copy of the real DOM. React uses it to efficiently update the user interface. Instead of updating the entire DOM when changes occur, React compares the virtual DOM with the previous state, identifies the differences (diffing), and then selectively updates only the changed parts in the real DOM. This minimizes DOM manipulation, improving performance.
Describe the lifecycle methods in a React component. How do they differ in Class components and Functional components with Hooks?
In class components, lifecycle methods include componentDidMount, componentDidUpdate, and componentWillUnmount. With functional components and Hooks, you can achieve similar effects using useEffect for componentDidMount and componentDidUpdate, and the cleanup function in useEffect for componentWillUnmount.
What are controlled and uncontrolled components in React? Provide examples of each.
Controlled components are components whose state is controlled by React. Example: <input type="text" value={this.state.value} onChange={this.handleChange} />. Uncontrolled components store their own state internally. Example: <input type="text" ref={inputRef} />.
How does React Router work, and what are the key components used for routing in React applications?
React Router is a declarative routing library for React. Key components include <BrowserRouter>, <Route>, <Link>, and <Switch>. <BrowserRouter> provides the routing context, <Route> renders UI based on the URL, <Link> creates navigation links, and <Switch> renders only the first matched <Route>.
Explain the significance of keys in React lists. How do they impact performance and rendering?
Keys are used to uniquely identify elements in a list. They help React identify which items have changed, been added, or been removed. Properly used keys improve performance and ensure efficient updates in the virtual DOM by minimizing unnecessary re-renders.
What are Higher-Order Components (HOCs) in React? How do they differ from Render Props?
HOCs are functions that take a component and return a new component with additional props. They allow code reuse. Render Props involve passing a function as a prop, providing a way for a component to share code with another. While HOCs use component composition, Render Props use component children.
What is Redux, and how does it work with React? Can you explain the core principles of Redux?
Redux is a state management library for JavaScript applications. Core principles include a single source of truth (store), state is read-only, changes are made by pure functions (reducers), and actions describe state changes. React interacts with Redux through the connect function and the Provider component.
Discuss the differences between shallow rendering and full rendering in testing React components. When would you use each approach?
Shallow rendering renders only the current component, excluding child components. Full rendering renders the entire component tree. Shallow rendering is useful for isolating the component being tested, while full rendering is necessary to test interactions with child components.
Explain the purpose of React Hooks. Provide examples of commonly used hooks and their use cases.
React Hooks allow functional components to manage state and use lifecycle features. Examples include useState for state management, useEffect for side effects, and useContext for accessing context. Hooks enable logic reuse in functional components.
How does React handle forms? What are controlled and uncontrolled forms, and when would you use each?
React handles forms by using controlled components (state-controlled) or uncontrolled components (DOM-controlled). Controlled forms use state to manage input values, providing better control and validation. Uncontrolled forms let the DOM manage the state, which can be useful for simpler forms.
What is server-side rendering (SSR) in React? How does it impact SEO and performance?
Server-side rendering is a technique where the initial rendering of a React application occurs on the server rather than the client. SSR improves SEO by providing search engines with a fully rendered page. It also enhances performance by sending a pre-rendered HTML page to the client, reducing the time to first render.
Describe the concept of context in React and when you might use it in your applications.
Context in React provides a way to share values like themes or authentication state between components without explicitly passing props. It's useful for data that needs to be accessed by many components at different nesting levels. Context is often used for providing a global state in an application.
Explain the importance of the shouldComponentUpdate method. How can you optimize rendering performance in React applications?
shouldComponentUpdate is a lifecycle method that allows components to prevent unnecessary renders. By implementing it, you can compare current and next props or state and decide whether a component should re-render. Optimizations include using PureComponent, memoization, and optimizing render logic to avoid unnecessary updates.
What is memoization, and how can you implement it in React for optimizing components?
Memoization is a technique to optimize expensive function calls by caching their results based on the input parameters. In React, you can use the React.memo higher-order component to memoize functional components, preventing unnecessary re-renders when the input props remain unchanged.
Discuss the differences between React function components and class components. When would you choose one over the other?
Function components are simpler and more concise, while class components offer additional features like lifecycle methods and local state. With the introduction of Hooks, function components can handle state and side effects, making them the preferred choice. Use class components when working with legacy code or integrating with certain libraries.
How does React handle security issues such as Cross-Site Scripting (XSS) attacks?
React provides protection against XSS attacks by default. It uses a feature called JSX, which escapes and sanitizes user inputs. Additionally, React recommends using the dangerouslySetInnerHTML prop with caution and provides strict guidelines for handling user input to prevent potential security vulnerabilities.
Explain the purpose of React Portals and provide an example of when you might use them.
React Portals allow rendering children into a DOM node that exists outside the parent component's DOM hierarchy. They are useful for scenarios like modal dialogs or tooltips, where the content should visually "pop out" but still be logically part of the React component tree.
What is the significance of the "key" prop in React? How does it help with the reconciliation process?
The "key" prop is used to uniquely identify elements in an array of children. It helps React's reconciliation process efficiently update the virtual DOM by determining which elements were added, removed, or rearranged. Keys should be stable, unique, and not derived from the array index to ensure proper reconciliation.
How do you handle state management in large-scale React applications? Discuss the pros and cons of different state management solutions.
State management in large-scale React applications can be handled using various solutions like React Context API, Redux, MobX, or Recoil. The choice depends on factors such as the complexity of the application, team familiarity, and specific requirements. Redux, for example, provides a predictable state container with a unidirectional data flow but may introduce boilerplate.
Can you describe the concept of React Suspense? How does it improve the user experience in data fetching scenarios?
React Suspense is a feature that enables components to "suspend" rendering while waiting for some asynchronous operation to complete, such as data fetching. It improves the user experience by allowing the UI to remain responsive during the loading state, and it simplifies error handling and code organization in asynchronous scenarios.