Understanding State and Props in React

I’ve been playing around with React and Redux recently and thought I would start writing articles on concepts which I’ve had to wrap my head around. So unless you’ve been living in a cave for the past few years, you’ll know that React is an awesome front-end library developed by the to make life easier for developers. good folks at Facebook It’s different to Angular or other frameworks as it is front-end (though see the comments below for a great clarification on this). With that said, it’s extremely powerful. purely One of the concepts I struggled to understand during my learning more about React was the interaction between State and Props. I figured that others may have had the same issue so here is my take on it. PROPS Let’s start with props. This simply is shorthand for . Props are how components talk to each other. If you’re at all familiar with React then you should know that props flow downwards from the parent component. properties There is also the case that you can have default props so that props are set even if a parent component doesn’t pass props down. This is why people refer to React as having data flow. This takes a bit of getting your head around and I’ll probably blog on this later, but for now just remember: data flows from parent to child. Props are immutable (fancy word for it not changing) uni-directional So we’re happy. Components receive data from the parent. All sorted, right? Well, not quite. What happens when a component receives data from someone other than the parent? What if the user inputs data directly to the component? Well, this is why we have state. STATE Props shouldn’t change, so state steps up. Normally components don’t have state and so are referred to as . A component using state is known as . Feel free to drop that little tidbit at parties and watch people edge away from you. stateless stateful So state is used so that a component can keep track of information in between any renders that it does. When you it updates the state object and then re-renders the component. This is super cool because that means React takes care of the hard work and is blazingly fast. setState As a little example of state, here is a snippet from a search bar (worth checking out if you want to learn more about React) this course Class SearchBar extends Component {constructor(props) {super(props); this.state = { term: '' };} render() {return ( this.onInputChange(event.target.value)} /> );} onInputChange(term) {this.setState({term});this.props.onSearchTermChange(term);}} SUMMARY Props and State do similar things but are used in different ways. The majority of your components will probably be stateless. are used to pass data from parent to child or by the component itself. They are immutable and thus will not be changed. Props is used for data, or data that will change. This is particularly useful for user input. Think search bars for example. The user will type in data and this will update what they see. State mutable