State & Props

State and props are the two fundamental ways data is handled in a React application, and understanding their differences is crucial. Props (short for 'properties') are used to pass data from a parent component down to a child component. They are read-only, meaning a child component should never modify the props it receives. This ensures a predictable, one-way data flow, which makes the application easier to reason about. You pass props to a component much like you would pass attributes to an HTML tag. For example, you could have a `UserProfile` component that receives a `user` object as a prop from its parent, `App` component. The `UserProfile` then uses this prop to display the user's name and email. State, on the other hand, is data that is managed and owned by a single component. It represents information that can change over time, usually as a result of user interaction. For example, the text inside an input field, whether a checkbox is ticked, or the data fetched from an API would all be managed in a component's state. When a component's state changes, React will automatically re-render that component and its children to reflect the new data. In modern React with functional components, state is managed using the `useState` hook. The key takeaway is: props are for passing data down the component tree, while state is for managing a component's own internal, mutable data.