1. Error Boundaries

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree. You can log these errors or display an error message/fallback UI for the component crashed.

Any class component defining the lifecycle method componentDidCatch is an error boundary. Errors occurring in a component tree get reported to the nearest componentDidCatch(error,info) . error is the error that has been thrown and info is an object with componentStack key. info.componentStack has information about component stack during the thrown error, which is useful for logging.

Note that error boundaries do not catch errors thrown in:

error boundary itself

components above them in the component tree

asynchronous code (e.g. setTimeout callback)

callback) event handlers

server-side rendering

Error boundaries came with React 16 and best practices are still emerging. The general advice is to wrap components in a fine-grained way so that they can be individually useful (when one component throws an error, other components can still work, e.g. wrapping page content can protect the sidebar navigation from being unmounted, thus users can easily go back to working parts of the app).

2. Reconciliation

React keeps a virtual representation of HTML in memory, which is known as the Virtual DOM. With the Virtual DOM, React virtually renders an HTML tree and then transfers this to the browser’s DOM. On a state or props update (which causes a re-render), we get a new “virtual” tree. Instead of writing the whole new tree to the browser’s DOM, React will only write the changes with the help of the “diffing” algorithm. This process is known as reconciliation, and it makes React fast and awesome.

Reconciliation: the process of making two opposite ideas agree (in our case, these two opposite ideas are the new and the old trees)

The diffing algorithm that React uses is explained in this part of the official docs.

3. Portals

When you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node. By creating a portal with ReactDOM.createPortal(child,container) , you can insert a child into a different location in the DOM. child is any renderable React child and container is any DOM element.

Common use cases for portals are dialogs, hovercards, and tooltips. Besides these, you can do some cool things like opening a new browser window inside a component while sharing state between windows, which is done in this very enjoyable post: Using a React 16 Portal to do something cool.

A portal behaves just like a normal React child except that it can be anywhere in the DOM tree. Note that DOM tree and React tree are different things, a portal exists in the React tree regardless of the position in the DOM tree. Thus, portals work well with event bubbling. An event fired from inside a portal will go up to its’ ancestors in the React tree, even if those ancestors are not its’ ancestors in the DOM tree.

4. Higher Order Components

A higher-order component (HOC) is a function that takes a component and returns a new component. HOC is not part of the React API, it is a pattern emerged from React’s compositional nature for reusing component logic. A normal component transforms its’ props into UI, but a HOC transforms a component into another component.

const MyNewComponent = myHOC(MyComponent); ... <MyNewComponent/>

If you need an abstraction for defining a logic in a single place and share it across many components, higher order component is what you are looking for. You can implement the logic inside the HOC and use it for different components without implementing it in each of them.

Here are some examples of use cases: Real world Higher-Order Components.

Important points to keep in mind:

Do not mutate the component passed.

Do not use HOCs inside the render method. If you need to apply a HOC dynamically, you can do it inside the constructor or lifecycle methods.

Static methods of the original component need to be copied.

You can pass through all props to the wrapped component, but it is not possible to pass through refs.

Higher order component is a bit tricky and a very broad concept, but I think it is very useful. For an advanced guide: React Higher Order Components in depth.

5. Type Checking with PropTypes

Instead of static type checkers like Flow and TypeScript (which identify certain types of problems before you run your code), you can use React’s type checking abilities. You probably get many annoying errors time to time because of passing wrong values to props. With propTypes , you can make sure that the data you received is valid and when an invalid value is provided for a prop, a warning will be shown in the JavaScript console.

Note that for performance reasons, propTypes is only checked in the development mode.

6. Refs

Refs are kind of escape hatches when you can’t modify a child with the typical dataflow (using props ). The ref attribute is used to store a reference and can be added to an HTML element or a custom component declared as a class.

A ref attribute takes a callback function which will be executed immediately after the component is mounted or unmounted. This callback receives the underlying DOM element/class component as its argument. By using the callback, we can store a reference which can be used to access the referred element.

Adding a ref to a class component :

Adding a ref to a DOM element:

If you are using refs too much, something is probably wrong and you should check again if the state is in the right place in the component hierarchy.