Initializing properties and state

In this section, you'll see how to implement the initialization code in React components. This involves using life cycle methods that are called when the component is first created. First, you'll implement a basic example that sets the component up with data from the API. Then, you'll see how the state can be initialized from properties, and also how the state can be updated as properties change.

Fetching component data

When your components are initialized, you'll want to populate their state or properties. Otherwise, the component won't have anything to render other than its skeleton markup. For instance, let's say you want to render the following user list component:

const ErrorMessage = ({ error }) =>
  error ? <strong>{error}</strong> : null;
 
const LoadingMessage = ({ loading }) =>
  loading ? <em>{loading}</em> : null;
 
function UserList({ error, loading...