What are component properties?

Properties are used to pass data into your React components. Instead of calling a method with a new state as the argument, properties are passed only when the component is rendered, that is, you pass property values to JSX elements.

Note

In the context of JSX, properties are called attributes, probably because that's what they're called in XML parlance. In this book, properties and attributes are synonymous with one another.

Properties are different than state because they don't change after the initial render of the component. If a property value has changed, and you want to re-render the component, then we have to re-render the JSX that was used to render it in the first place. The React internals make sure that this is done efficiently. Here's a diagram of rendering and re-rendering a component using properties:

Figure 3.2 – The cycle of rendering components as properties

This looks a lot...