Data Model Props

Sometimes our components represent entities in our data schema, such as people, articles, posts, multimedia, etc. In these cases, we have to decide how we want to pass our data into our components, e.g. our post data model into our Post component.

This is especially common if we're using a REST API, since we often fetch entire resources vs. just the data we need (e.g. when using GraphQL).

Passing the resource directly

Suppose we have an array of PostResource objects. The simplest way to pass one into a Post component is by passing the entire resource as a prop.

The disadvantages of this approach are that we may pass some data that isn't used by the component (e.g. the author field of PostResource), and we closely couple our components and data models.

Duplicating the props

It's more common to pass each individual property that we need from the resource into our component. While it can be a bit of a hassle to write out each property, the explicitness helps us make changes to either our data model or our component more easily.

Spreading props

We can pass any number of props from an object into a component using the ... spread syntax.

This is convenient when we have a lot of props to pass. However, it can also result in us passing props that aren't actually used (e.g. the author of the PostResource gets passed to the <Post />, even though it isn't used).