State -vs- Props

Distinguishing React’s state from props can be very confusing. They’re both plain JavaScript objects that hold data which affects what’s rendered. The rendered output determines what will appear on the computer screen. These similarities were so prominent, that initially I struggled seeing the differences between the two.

Props is an abbreviation of properties. Properties are values (attributes) associated with an object. Props is how values are passed into a component. A parent component passes props to its child component. Props values are used to return React elements that describe what the browser should reveal on the computer screen. The React documentation (https://reactjs.org/docs/components-and-props.html) explains it as follows:

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

An example of how props are used is when a list of items is rendered. The parent passes the props to its child component which configures how the items in the list will be rendered on the computer screen.

State is data that is mutated in a component. State starts with a default value when a component mounts (is created and inserted onto the DOM tree). Changes to state are usually based on a user’s actions requiring changes in what will be rendered. State handles things like changing data when a user clicks a button, fetching remote data then updating the component with it, and responding to passing time. A change in state causes a component to re-render. On GitHub, UberVU (https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) asserts the following about a component with state:

We also call these state managers. They are in charge of client-server communication (XHR, web sockets, etc.), processing data and responding to user events.

An example of how state is used is when state tracks and updates a list of items to indicate a reduction of items after a user clicks to purchase items from that list. These changes (the reduced list) are passed down to a child component responsible for configuring how the changes will be rendered on the computer screen.

Many times, I came across information asserting that state can change but props cannot change. This was very confusing because props do change. The crucial distinction was that a child component can’t change its props but it can change its state. Props are passed to it from its parent and the child component can’t change these props. However the parent can pass down different props and that’s how props change.

State can be difficult to manage so it should not be used unless absolutely necessary. UberVU (https://github.com/uberVU/react-guide/blob/master/props-vs-state.md) gives the following guideline to help determine that decision:

If a Component needs to alter one of its attributes at some point in time, that attribute should be part of its state, otherwise it should just be a prop for that Component.

Once you’ve decided state is necessary, you have to determine which component should be responsible for holding state. React documentation lists the following steps to help you in that process (https://reactjs.org/docs/thinking-in-react.html#step-4-identify-where-your-state-should-live):

For each piece of state in your application:

— Identify every component that renders something based on that state.

— Find a common owner component (a single component above all the components that need the state in the hierarchy).

— Either the common owner or another component higher up in the hierarchy should own the state.

— If you can’t find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common owner component.

If you’re still confused about the differences between state and props, consult the React documentation on Component State (https://reactjs.org/docs/faq-state.html#what-is-the-difference-between-state-and-props). It has a section entitled What is the difference between state and props? I found the following distinction particularly helpful:

props get passed to the component (similar to function parameters) whereas state is managed within the component (similar to variables declared within a function)

I hope this helps shed some light on the differences between state and props and when to use them. The best way to internalize this information is to practice using state and props in building your React apps.