| Question |
Answer |
| What is React's useImperativeHandle hook used for? | useImperativeHandle customizes the instance value exposed when using React.forwardRef. It allows you to control what is exposed to parent components. |
| How does React's StrictMode help in development? | StrictMode highlights potential problems in an application by running additional checks and warnings for its descendants in development mode. |
| What is the difference between hydrate and render in React? | hydrate is used for server-side rendered apps to attach event listeners to the existing HTML, while render is used to create a new DOM tree. |
| How do you handle code splitting in React? | Use dynamic imports with React.lazy and Suspense or tools like Webpack to split code into smaller chunks that are loaded on demand. |
| What is the purpose of React's forwardRef? | forwardRef allows a parent component to pass a ref to a child component, enabling direct access to the child's DOM node or instance. |
| How do you implement a higher-order component (HOC) in React? | A HOC is a function that takes a component as an argument and returns a new component, e.g., const EnhancedComponent = withHOC(OriginalComponent);. |
| What is the difference between useCallback and useMemo? | useCallback memoizes a function, while useMemo memoizes the result of a computation. Both are used to optimize performance. |
| How do you handle state management in large React applications? | Use libraries like Redux, MobX, or React's Context API with useReducer for scalable state management. |
| What is the purpose of React's Fragment? | Fragment allows you to group multiple elements without adding extra nodes to the DOM. |
| How do you test React components? | Use testing libraries like Jest and React Testing Library for unit and integration testing, and tools like Cypress for end-to-end testing. |
| What is the difference between componentWillUnmount and useEffect cleanup? | componentWillUnmount is a lifecycle method in class components, while useEffect cleanup is used in functional components to handle unmounting or cleanup logic. |
| How do you handle prop drilling in React? | Use the Context API or state management libraries like Redux to avoid passing props through multiple levels of components. |
| What is the purpose of React's useRef hook? | useRef is used to persist a mutable reference that doesn’t trigger re-renders and to directly access DOM elements. |
| How do you handle lazy loading of images in React? | Use libraries like react-lazyload or implement the Intersection Observer API to load images only when they are in the viewport. |
| What is the difference between React.createElement and JSX? | React.createElement is a function that creates React elements, while JSX is a syntax sugar that transpiles to React.createElement calls. |
