Q1. What is the main difference between state and props?
Props (properties) are passed from parent to child and are read-only. State is internal to a component and can be changed using setState or useState. Props are used to pass data and event handlers down, while state manages dynamic data within a component.
Q2. Can a child component change its props?
No, a child component cannot directly change its props. Props are immutable. If the child needs to modify data, it should call a function passed as a prop from the parent, which then updates the parent's state, causing the parent to re-render and pass new props.
Q3. How do you decide whether to use state or props?
Use props to pass data from parent to child and for configuration. Use state for data that changes over time and is specific to the component. If multiple components need to share the same changing data, lift the state up to a common ancestor and pass it down via props.
Q4. Can state be passed as props to child components?
Yes, you can pass state from a parent to a child as props. This is a common pattern to share data. The child receives the state value via props, but cannot modify it directly. To change it, the parent also passes a callback function that the child can invoke.
Q5. What is the role of props in functional components?
In functional components, props are the first argument of the function. They are used to receive data and callbacks from the parent. Since props are immutable, the component should treat them as read-only and not attempt to modify them.