What are component properties?

Properties are used to pass data into your React components. Instead of calling a method with new state as the argument value, properties are passed only when the component is rendered. That is, we 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're not something that's changed after the initial render of the component. If a property value has changed, and we 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 take care of making sure this is done efficiently. Here's an illustration of rendering and re-rendering a component using properties:

This looks a lot different than a stateful component. The real difference is that with properties, it's often...