ReactJS Advanced Concepts Syllabus

Inside a render-prop component, how does it invoke the render prop?

In its render method it calls the function prop with its internal state, e.g. return this.props.render(this.state); (or this.props.children(this.state)).

What is a caveat when combining render props with React.PureComponent?

If you pass an inline arrow function as the render prop, a new function is created each render, defeating PureComponent shallow-prop comparison. Define the function as an instance method to avoid this.

Give a classic example use case implemented with render props.

A Mouse tracker that reports cursor position via a render prop, letting any consumer render arbitrary UI (e.g., a cat image) that follows the mouse.

How do render props and HOCs relate as patterns?

They solve the same problem (reusing logic). Any HOC can be written as a render-prop component and vice versa; render props keep composition explicit in JSX, HOCs move it to component definitions.

Which modern React feature largely replaces both HOCs and render props for logic reuse?

Custom Hooks. Hooks let you extract stateful logic into reusable functions without adding wrapper components, avoiding 'wrapper hell'.

What is 'wrapper hell' and which patterns cause it?

Deeply nested component trees created by stacking many HOCs or render props, making the DevTools tree hard to read. Custom Hooks avoid it by not adding wrappers.

What is a React Portal?

A Portal is a way to render children into a DOM node that exists outside the DOM hierarchy of the parent component, while keeping them in the React component tree.

What is the API signature for creating a Portal?

ReactDOM.createPortal(children, container), where children is any renderable React child and container is the target DOM element to render into.

Give a minimal Portal render example.

render() { return ReactDOM.createPortal(this.props.children, domNode); } where domNode is a DOM element (e.g., document.getElementById('modal-root')).

Even though a Portal renders into a different DOM node, where does it stay in the React tree?

It stays inside its parent component in the React tree, so it still has access to context, props, and the normal React data flow regardless of DOM position.

How do events propagate from a Portal?

Events bubble up through the React tree (the parent hierarchy), NOT the DOM tree. A click inside a portal can be caught by an onClick handler on the React ancestor, even though the DOM node is elsewhere.

Why is event bubbling through the React tree in portals useful?

It lets parents catch events from portaled children (e.g., a modal) as if they were regular children, enabling flexible abstractions like dialogs and tooltips that still integrate with parent logic.

What are the primary use cases for Portals?

Modals/dialogs, tooltips, popovers, dropdown menus, notifications/toasts, and hovercards — any UI that must visually break out of a container with overflow:hidden, z-index, or clipping constraints.

Why do overflow:hidden or z-index issues motivate using a Portal?

When a child is inside a container with clipped overflow or a stacking context, it can be cut off or hidden. A Portal renders it higher in the DOM (e.g., document.body) so it escapes those constraints.

What is the typical HTML setup for using a modal Portal?

Add a sibling root in index.html, e.g. <div id="root"></div><div id="modal-root"></div>, then portal the modal into #modal-root via document.getElementById('modal-root').

How does a Portal differ from simply rendering a child normally?

A normal child is inserted into the parent's DOM subtree; a Portal inserts the child into a DOM node you specify (outside the parent subtree), while preserving React-tree relationships.

What is Inheritance Inversion in HOCs?

An HOC technique where the returned component extends (class Enhanced extends WrappedComponent), allowing it to intercept lifecycle, read/hijack state and props, and conditionally control rendering via super.render().

What can Inheritance Inversion do that Props Proxy cannot easily?

Render highjacking: it can read and modify the React element tree output by the wrapped component's render, conditionally render it, and manipulate the wrapped component's state directly.

Why are HOCs considered a compile-time / static pattern versus render props being dynamic?

HOCs are typically applied once when the component is defined (static composition), while render props resolve composition dynamically during render, allowing runtime decisions about what to render.

What convention should HOCs follow regarding props they don't use ('pass-through')?

They should be transparent: pass through unrelated props unchanged via {...props}, only adding/overriding the specific props relevant to the concern they address.

When wrapping a component with an HOC, what happens to the wrapped component's state?

The wrapped component keeps its own state; the HOC can add its own separate state in the container. Reapplying the HOC in render, however, would remount and reset that state.

How can a render-prop component provide multiple values to the consumer?

By calling the render function with an object or multiple arguments, e.g. props.render({ data, loading, error }), letting the consumer destructure what it needs.

Compare HOCs and render props on 'where composition is visible.'

With render props, the composition and data flow are explicit in JSX where used. With HOCs, composition is implicit at the component's definition, so the injected props' origin can be less obvious.

What indirection/naming problem is a downside of HOCs?

Prop name collisions and hidden origins: injected props can clash or be untraceable, and the extra wrapper layers add indirection that complicates debugging.

How do you conditionally render nothing from a render-prop or HOC-based subscription while loading?

Return null (or a fallback) until data arrives: e.g. if (!data) return null; then call the render prop / render the wrapped component with the loaded data.

What must the second argument to ReactDOM.createPortal be, and can it be created dynamically?

It must be a valid DOM node (an actual Element). It can be a static node from the HTML, or one created dynamically (e.g., document.createElement('div')) and appended/removed in lifecycle or effects.

When dynamically creating a portal container node, what cleanup is required?

Append the created node to the DOM on mount (componentDidMount / useEffect) and remove it on unmount (componentWillUnmount / effect cleanup) to prevent orphaned DOM nodes.

Do portals change React's context behavior for the portaled subtree?

No. Because portals remain in the React tree, the portaled children still receive context from their React ancestors, independent of their DOM location.

Summarize the key difference between the DOM tree and React tree for a Portal in one sentence.

A Portal's content lives in a different place in the DOM tree but the same place in the React tree, so styling/layout follow the DOM target while data flow and events follow the React parent.

Which three advanced patterns are alternatives for sharing cross-cutting logic, and which is preferred in modern React?

Higher-Order Components, Render Props, and Custom Hooks. Custom Hooks are preferred in modern React because they reuse logic without extra wrapper components.