Why you need both state and props

So we talked about state and props, but what's the difference anyway? Well, one difference is that both functional components and class based components have props, whereas only class based components have state. Also, state is an internal component whereas props come from the outside. Maybe I should draw a picture. Let's say we have this component here. This button gets props from outside. These props can be let's say a label, a rounded, and what else? Let's say on click and we're going to talk about call backs later. Internally, it has state. This state was click and depending on whether it was clicked it does something.

As far as rendering goes, we use both state and props the same way. This dot props dot something is used to access properties. This dot state dot something is used to access the internal state of a component, but as far as GSX is concerned, what comes out is just javascript values. Then why even have both?

Well, the idea behind props is that they are [inaudible 00:01:04] and ... The idea behind props is that they work like function arguments. You pass them into your component and the expectation is that whenever you pass the same arguments into your component, it renders the same way. Whereas with state you're expecting your component to change depending on state, rather you're expecting your state to change over time. As a friend of mine likes to say, state is props that change over time. The idea with state is that there's something internal in your component that can happen and change the way your component is rendered.

In a nutshell, props, always the same, pass the same props into your component, get the same result. State, changes over time and changes what your component does based on user action. We're going to look at that stuff tomorrow.

Know someone who wants to learn React and its whole ecosystem? Share 👇


Cheers,
~Swizec