‫A very common beginner question
‫or sometimes even an interview question is this,
‫what's the difference between state and props?
‫Well, we actually already learned almost everything
‫to answer that question,
‫but let's still make the difference between state
‫and props crystal clear in this lecture,
‫which will also serve
‫as a nice summary to this entire section.
‫So as we already know, state is internal data.
‫So data that is owned
‫by the component in which it is declared,
‫and we can see that nicely
‫in this small example with two components.
‫Now, on the other hand, props is external data.
‫So data that is owned by the parent component,
‫and you can think of props as function parameters.
‫So as a communication channel between parent
‫and child components where parents
‫can pass data into children.
‫State on the other hand can be thought of
‫as the component's memory
‫because it can hold data over time,
‫so across multiple re-renders.
‫Now state can be updated by the component itself
‫and as we already know, this will then
‫cause the component to be re-rendered by React.
‫Therefore, we use this mechanism
‫of state to make components interactive.
‫On the other side props work very differently.
‫They are read only, so they cannot be modified
‫by the component that is receiving them.
‫However, and this is something
‫that we haven't learned before,
‫when the child component receives new updated props,
‫that will actually also cause the component to re-render,
‫and let's actually analyze that here in this code example.
‫So one of the props that was passed to question
‫is called "Up Votes",
‫and that up votes variable is actually state
‫and the parent component, right?
‫It's created using the useState Hook
‫and therefore up votes is in fact state.
‫Now if this piece of state is updated, of course
‫the question component who owns the state
‫will be re-rendered,
‫but it makes sense that the child component
‫who basically receives that state as props,
‫should also be re-rendered right?
‫Because how else would the button component
‫be kept in sync with the state that it received as a prop?
‫So in conclusion, whenever a piece of state is passed
‫as a prop, when that state updates,
‫both components are re-rendered.
‫So both the component owning the state
‫and the component receiving the state as a prop,
‫and so this is a very important connection between state
‫and props that you should keep in mind.
‫Now finally, while state is used by developers
‫to make components interactive,
‫props are used to give the parent component
‫the ability to configure their child components.
‫So basically props can be seen
‫as settings in child components,
‫which the parent component can define as they wish,
‫and that's it.
‫So if you ever get asked the difference
‫between state and props in a job interview,
‫I sure hope that you're going to nail it.