Both props and state trigger a render update.
Props is short for properties. They represent information you can pass and access across your components. We can think of props as global variables that can be passed down to children components but never changed within those components. The parent component is the only component that can set attributes of that reusable variable, making the transition from component to component seamless. To reference the attributes we have assigned, we need to create an instance of the current class using this. When we render the code below it gives us the value of the variable we have assigned to symbol. We can use this prop anywhere in our code as many times as we want. Pretty cool, right?
State on the other hand is only used internally within a single component. If you think about state in terms of a person, it changes over time. State in React initializes a variable and tracks its changes. Although it is not always advised to change the status of state, its possible with setState. React documentation attempts to clear up when you should utilize state in your dynamic code by asking yourself the following questions about your piece of data.
- Is it passed in from a parent via props? If so, it probably isn’t state.
- Does it remain unchanged over time? If so, it probably isn’t state.
- Can you compute it based on any other state or props in your component? If so, it isn’t state.
To demonstrate where these data types live in our code I have created an app with a Woods component as the parent and a Blair Witch component as the child in honor of the 20th anniversary of The Blair Witch Project. In the code below I am passing the attribute of symbol to BlairWitch and subsequently implementing it in an h4 tag within my child component. When executing how to set and call props it is imperative to insert the phrase between a pair of curly boys.
State represents data that is mutated within a component. A major difference between state and props is that state has the ability to change in a components life. A rule of thumb for when state should be used is during any type of user interaction whether that be in the form of a button, a check box, a search bar or a submit button for a form. Before diving into the pieces that make up state lets take a look at the code for my Blair Witch App.
The two pieces of the state puzzle are initial state and setState(). Initial state will declare the starting state of data in your class component and setState(), which passes in an object, schedules changes to be made to that object. This.setState is the space in which each component can change its own state. Beware! SetState() is asynchronous so when it’s fired it lets the state of the value know that its time to change when it has a chance to do so.
State is essential for user interactivity like logging in for example and React, being the sweet framework that it is, renders the changes as a response to your setState function.
Main takeaways are the distinct differences between changes in state and prop. Any changes made to our component using props and state will re-render that component when triggered. However, because state changes occur exclusively inside of a component, they can trigger those changes where components do not have the capacity to alter its props without passing changes down from a parent or grand-parent component.
Below is a handy guide on how to effectively work with events that trigger a state change.