Components in React.js have two properties used to store data to display in HTML: the
render function of your components. Here I've summarized the difference between
props, as well as their use cases.
state is useful when a property may change. For example, the user clicks a button, types in an input field, or receives new data from a WebSocket server. These events would update a property in the component's
state by calling
setState, and the update is
rendered in HTML.
It's useful to think of
props as a configuration object for your React component. That is, once a component receives its
render may use it to display data in the HTML, but the
props object will not change. Think of it as an immutable config object.