Portals? Advanced Guides > Learn React Today

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ReactDOM.createPortal(child, container) The first argument (child) is any renderable React child, such…

How to Optimizing Performance? Advanced Guides > Learn React Today

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize…

JSX In Depth? Advanced Guides > Learn React Today

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function. The JSX code: <MyButton color="blue" shadowSize={2}> Click Me </MyButton> compiles into: React.createElement( …

Higher-Order Components | HOC | Advanced Guides > Learn React Today

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature. Concretely, a higher-order…

Fragments? Advanced Guides > Learn React Today

A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM. render() { return ( <React.Fragment> <ChildA /> <ChildB…

Forwarding Refs? Advanced Guides > Learn React Today

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components,…