What is the difference between props and state in React?
Published Sep 3 2022
What is the difference between props and state in React?
Props and state in React are both JavaScript objects which hold information about what will be rendered in a React component. Props (short for properties) are used to pass data from one component to another, while state is used to manage data within a component. A change in either props or state will trigger a component to re-render, but there are significant differences in how they are used.
State cannot be accessed outside of a given component unless it is then passed as props. Props are immutable, which means they cannot be changed by the component (though they could be changed by the parent component from which they were passed). State, on the other hand, can be changed by the component. In functional components, this is achieved using the second item in the array returned by the useState() hook.
In the playground below, you can see props and state in action:
Code Playground
Have a play around with the code and the user interface to see how props and state work in action.
Far out, right?
