Advanced React Concepts Flashcards
What is context in React?
Context provides a way to pass data through the component tree without having to pass props down manually at every level.
How does React’s Concurrent Mode enhance user interfaces?
It allows React to interrupt a long-running render to handle high-priority events like user input, leading to more responsive apps.
What is a higher-order component (HOC)?
A HOC is a function that takes a component and returns a new component with added props or functionality.
Explain the purpose of the React.memo() function.
It memoizes the rendered output of a component, preventing unnecessary renders if props don’t change.
What is the purpose of useState in React?
To manage local state within a functional component.
When should you use useEffect?
When you want to perform side effects (like fetching data, manual DOM manipulations, etc.) in functional components.
What is useContext used for?
To access the context for a component without wrapping it in a Consumer.
When is it beneficial to use useReducer?
When state logic is more complex and involves multiple sub-values, or when the next state depends on the previous state.
What is the main purpose of useCallback?
To memoize functions so they don’t get recreated every render, especially when passed to child components as props to prevent unnecessary renders.
Why would you use useMemo?
To memoize expensive computations so they are only re-computed when specific inputs change.
When should you use useRef?
For accessing and interacting with DOM elements directly, or for keeping a mutable reference to a value that doesn’t trigger a re-render when it changes.
What does useImperativeHandle do?
It customizes the instance value that is exposed when using React.forwardRef.
When is useLayoutEffect used?
When you need to perform synchronous visual DOM updates, similar to useEffect but it fires synchronously after all DOM mutations.
What is useDebugValue used for?
It’s used in custom hooks to display a label in React DevTools next to this hook.
What is React’s context?
A mechanism for passing data directly to nested components without prop-drilling, often used for global state or theming.
What’s the purpose of Error Boundaries in React?
Components that catch JavaScript errors in their child component tree, log those errors, and display a fallback UI.
What are Uncontrolled Components in React?
Components that store their own state internally and you query the DOM directly using refs to find their current values when needed.
What are Controlled Components in React?
Components where React controls the form elements’ values (like an input’s value) and changes are handled by a function passed as a prop.
Explain the importance of keys in React lists.
Keys help React identify which items have changed, are added, or removed, enabling efficient and accurate UI updates.
How does React’s Lazy loading work?
Using React.lazy(), components are loaded dynamically with import(), aiding in performance optimization by splitting the app into chunks.
Explain React Fragments.
Fragments allow grouping multiple child elements without adding extra nodes to the DOM, useful for returning multiple elements from a component.
What are React Portals?
Portals provide a way to render children into a DOM node outside of the parent DOM hierarchy, often used for modals or pop-ups.
What is Concurrent Mode in React?
An experimental feature that allows React to interrupt rendering to work on multiple tasks simultaneously, optimizing user interactivity.
What’s the primary use of React.memo?
It’s a higher order component that memoizes the rendered output, preventing unnecessary renders if the props haven’t changed.
What is the purpose of Suspense in React?
It lets your components “wait” for something before rendering, commonly used with React.lazy() to show fallback content like a loading spinner.
What is React’s forwardRef?
A tool to forward refs from a parent component to a child component, useful for direct child DOM manipulation or accessing child instance methods.
