Component Patterns

A higher-order component, or HOC, is a function that takes a component and returns a new component with additional props or behavior. It is a pattern for reusing component logic, though hooks have largely replaced it in modern React.

The render props pattern is a technique where a component accepts a function as a prop and calls it to determine what to render. It allows sharing logic between components by passing rendering responsibility to the consumer.

forwardRef is a function that lets a component receive a ref from its parent and forward it to a DOM element or another component. It is useful for wrapper components that need to expose an underlying element to their consumers.

An error boundary is a class component that catches JavaScript errors anywhere in its child component tree during rendering, in lifecycle methods, and in constructors. It logs the error and displays a fallback UI instead of crashing the whole app.

As of current React versions, only class components can implement the componentDidCatch and getDerivedStateFromError lifecycle methods required to catch errors. There is no hook equivalent yet.

Error boundaries do not catch errors inside event handlers, asynchronous code like setTimeout callbacks, server-side rendering, or errors thrown in the error boundary itself. Those must be handled with regular try-catch blocks.

A portal lets you render a child component into a DOM node outside of the parent component's DOM hierarchy. It is commonly used for modals, tooltips, and overlays that must visually escape their container.

A pure function always returns the same output for the same input and has no side effects. React expects components to be pure during rendering so it can safely re-run them, skip updates, and enable concurrent features without causing bugs. ---