Learning React

Chapter 7. Enhancing Components

So far we’ve learned how to mount and compose components to create application presentation layers with React. It is possible to build quite a few applications using only the React component’s render method. However, the world of JavaScript is complex. There is asynchronicity everywhere. We have latency to deal with when we load our data. We have delays to work with when we create animations. It is highly likely that you have preferred JavaScript libraries to help you navigate the complexity of real-world JavaScript.

Before we can enhance our applications with third-party JavaScript libraries or backend data requests, we must first understand how to work with the component lifecycle: a series of methods that can be invoked every time we mount or update a component.

We will start this chapter by exploring the component lifecycle. After we introduce the lifecycle, we will review how we can use it to load data, incorporate third-party JavaScript, and even improve our component’s performance. Next, we will explore how to reuse functionality across our applications with higher-order components. We will wrap up this chapter by looking at alternative application architectures that manage state entirely outside of React.

Component Lifecycles

The component lifecycle consists of methods that are invoked in series when a component is mounted or updated. These methods are invoked either before or after the component renders the UI. In fact, the render method ...