CodeParkProps are inputs a component receives from its parent. State is data a component owns and remembers between renders.
Props work like function arguments. They are read-only: a component must never change its own props. When the parent re-renders with new values, the child gets the new props.
State is created with useState or useReducer. Calling the setter function schedules a re-render with the new value.
A useful rule to decide:
- If a value is passed in from above, it is a prop.
- If it changes over time, because of user actions or other events, and this component is responsible for it, it is state.
- If you can compute it from existing props or state, it should be neither. Just calculate it during render.
One component's state often becomes another component's props. For example, a TodoApp keeps todos in state and passes them to TodoList as a prop.
- Props come from the parent and are read-only.
- State is owned by the component and is kept between renders.
- Updating state triggers a re-render. Props change when the parent re-renders.
- Values you can compute from props or state should be computed, not stored.
- State in a parent is often passed down to children as props.