The first time I learned about React state and props, I was confused and incorrectly implemented it in a project until I read more about it and understand the differences between those two. Therefore, I want to share how to use state and props properly in React.
\nBoth state and props are variables in a React component. One obvious difference would be: props are variables (or should I say: constants) passed down to a child component, it is a way of communication between parent and child components.\nTake a look at the code below:
\n<Header title='Hello World' />The Header component above is receiving a title as props with value \"Hello World\". It can be accessed inside the Header component using this.props.title.\nAnother difference would be: props are immutable while states are mutable, and the way to change state is via a function called setState. A state is usually used to hold data that changes over time, and changes in the state causes that component to re-render.
A state is usually initialised inside a constructor of a component, like the code below:
\nclass Header extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n color: 'blue';\n }\n }\n}As the above state initialised, we can later change the data inside the state, for example, color can be changed to red via the code below:
\nthis.setState({color: 'red});One common mistake for a beginner user of React is initialising state from props. Many would say that this is an anti-pattern because it creates a second source of truth which can lead to bugs. However, there is a trick as this quote:
\n\n\nIt's not an anti-pattern if you make it clear that the props is only seed data for the component's internally-controlled state
\n
So I think as long as we follow the rule above, bugs can be avoided.
"}},"pageContext":{"slug":"/react-state-props/"}},"staticQueryHashes":[]}