React 2 Flashcards
: How does the virtual DOM work in React, and why is it important?
The virtual DOM is an in-memory representation of the real DOM. React uses it to optimize updates by comparing the virtual DOM with the real DOM (reconciliation) and only applying the necessary changes. This improves performance and makes updates more efficient.
What are React Hooks, and how do they differ from class lifecycle methods?
React Hooks are functions that let you use state and other React features in functional components. They differ from class lifecycle methods by enabling state management and side effects in functional components without using classes.
Explain the concept of Higher-Order Components (HOCs) and provide use cases.
HOCs are functions that take a component and return a new component with additional props or behavior. They are used for code reuse, such as adding authentication checks or handling data fetching.
What is Context API, and how does it help in managing global state?
The Context API provides a way to share values between components without passing props manually through every level of the tree. It helps in managing global state by allowing components to access and update shared data.`
How does React’s reconciliation algorithm work?
React’s reconciliation algorithm efficiently updates the real DOM by comparing the virtual DOM with the previous version and applying only the necessary changes. It uses heuristics to minimize the number of updates and improve performance.
Describe the concept of “lifting state up” in React and provide an example.
Lifting state up” involves moving state from child components to a common parent component to share state and behavior between siblings. For example, moving form input state to a parent component so that multiple input fields can be controlled together.
What is the purpose of the useReducer hook, and how does it compare to useState?
The useReducer hook manages complex state logic with a reducer function, similar to how Redux works. It is useful when state transitions are complex, while useState is simpler and better for less complex state management.
How can you optimize the performance of a React application?
Performance can be optimized by using techniques such as memoization with React.memo, useMemo, and useCallback, lazy loading components, code splitting, and avoiding unnecessary re-renders.
Explain the role of keys in React lists and why they are important.
Keys help React identify which items have changed, are added, or are removed from a list. They improve the efficiency of re-rendering by allowing React to optimize updates and reduce unnecessary re-rendering of list items.
What are React Portals, and when should they be used?
eact Portals allow rendering components outside their parent component’s DOM hierarchy. They are useful for modals, tooltips, and other components that need to be visually separate from their parent.
Describe the benefits and limitations of server-side rendering (SSR) with Next.js.
SSR with Next.js improves performance by rendering pages on the server before sending them to the client, which can enhance SEO and load times. Limitations include increased server load and complexity in managing server-side and client-side code.
How do you implement code splitting in a React application?
Code splitting can be implemented using dynamic import() statements and React’s lazy and Suspense components to load components asynchronously, reducing the initial bundle size and improving load times.
What are custom hooks, and how can they help in reusing logic across components?
Custom hooks are JavaScript functions that use React hooks internally and can be shared across components to encapsulate and reuse stateful logic or side effects.
Explain the concept of controlled and uncontrolled components in form handling.
Controlled components have their form data managed by React state, while uncontrolled components manage their own state internally and can be accessed using refs. Controlled components provide more control over form inputs and validation.
How can you manage side effects in a React application?
Side effects can be managed using the useEffect hook, which allows you to perform operations like data fetching, subscriptions, and manually modifying the DOM in a functional component.
