|
Question: What are Higher Order Components (HOCs) in React?
|
Answer: The Higher Order Components (HOCs) are functions that take a component as an argument
and return a new component with enhanced functionality.
HOCs are used for code reuse, logic abstraction, and cross-cutting concerns like authentication, logging,
or data fetching. They are a powerful pattern in React for creating reusable and composable components.
|
|
Question: Can you explain the concept of lazy loading in React?
|
Answer: in React, lazy loading is a technique used to defer the loading of resources
(such as components, images, or data) until they are needed.
In React, lazy loading is typically used with React's Suspense component and the lazy() function
to asynchronously load components.
Lazy loading helps improve performance by reducing the initial bundle size and only loading resources when they are required.
|
|
Question: What is the purpose of the 'shouldComponentUpdate()' method in React?
|
Answer: The 'shouldComponentUpdate()' is a lifecycle method in React that determines whether a component
should re-render when its props or state change.
By default, it returns true, causing the component to re-render on every state or prop change.
However, you can override this method to implement custom logic for optimizing performance by preventing unnecessary re-renders.
|
|
|
|
|
|
Question: Can you explain the concept of conditional rendering in React?
|
Answer: In React conditional rendering refers to the practice of rendering different components or elements based
on certain conditions. This can be achieved using JavaScript expressions within JSX, such as if statements, ternary operators,
or logical && operators.
Conditional rendering allows developers to create dynamic UIs where components are displayed or hidden based on user interactions,
data fetching results, or application state.
|
|
Question: What are React portals and why are they used?
|
Answer: React portals provide a way to render children components outside the DOM hierarchy of the parent
component. They are often used for scenarios like modals, tooltips, or popovers, where the content
needs to be rendered at a different location in the DOM tree.
Portals enable developers to maintain encapsulation and avoid CSS conflicts while rendering components
in a different part of the DOM.
|
|
Question: What is React.memo() and when would you use it?
|
Answer: The React.memo() is a higher-order component that memoizes a functional component to prevent
unnecessary re-renders. It is similar to PureComponent for class components but works with functional components.
React.memo() compares the previous props and the next props of the component and only re-renders if there
are differences. It is useful for optimizing performance in functional components that rely on props.
|
|
|
|
|
|
Question: What is React Router and how does it work?
|
Answer: The React Router is a popular library for handling routing in React applications.
It allows developers to define routes and map them to specific components, enabling navigation between different
views in a single-page application.
React Router uses a declarative approach, where routes are defined using JSX components. It also supports
features like nested routes, route parameters, and programmatic navigation.
|