Many beginner React developers have a challenge understanding the difference between props and state. These concepts are not exclusive to React, but they are integral features. React uses props and state to notice when the component needs to be updated. State and props store component data. Whenever that data changes, React knows the component needs to be rerendered.
This article will be dedicated to explaining differences between state and props in React.
State
Certain values describe component’s current state. Throughout the lifecycle of a component, these values might change. For example, user input could be stored in the state object. It could also store other changeable values that describe component’s behavior.
For example, a component’s state object could have a hidden property that stores a Boolean – whether the component should be displayed or hidden. Then you can use conditional rendering in JSX to display this component – only as long as hidden is false. If it is true, component will be hidden. This state value could be tied to user’s input. In fact, state is often used to implement features like resetting form values after it is submitted. More about that on SFE:
https://simplefrontend.com/clear-form-after-submit-in-react/
State object often stores external data received from the API. We use fetch() method or axios library to import external data and store it in the state.
Every React component has its own state. In functional components, you can use useState() to create state values. The hook also returns a function to update the state value. In class components, we manually initialize the state object and use the setState() method to update the state. setState() method takes one argument – the new state object that should be the state.
A component’s state can only be modified within the component. Whenever there are changes in the state, component re renders. This is one of the best React features – component is updated when the data is updated. So component always displays the latest ‘state’ of data.
Props
Reusable components are an integral part of React. Therefore you need some way to pass data from parent component to its children. React has two solutions – the props object and Context API.
Props object is used to pass data between components. Every functional component takes props as an argument, where you can access props passed to the child component. For reasons of consistency, child components can not modify props passed to them.
Similar to state, prop changes also trigger a re-render of the component and all its child components.
Data passed down as props usually comes from the state. React recommends that the state of component at the top of the tree should contain all the state data. So it can be passed down to child components. This principle is called a ‘single-source of truth’. Also, data can be passed only from top to bottom of the component tree. Child components can not pass data to their parents.
In the parent component, you only need to set a ‘custom’ attribute on a component. Attribute name will be the property name in the props object.
