Props and State

Props, short for properties, are read-only inputs passed from a parent component to a child component. They allow components to be configured and reused, and a child component must never modify its own props.

State is data managed inside a component that can change over time, usually in response to user actions or network responses. When state changes, React re-renders the component to reflect the new data on the screen.

Props are passed into a component from its parent and are read-only inside that component. State is owned and managed inside the component itself and can be updated with a state setter from useState or with this.setState in a class.

Lifting state up means moving state from a child component to the closest common ancestor of components that need to share it. The ancestor passes the state and setters down as props, keeping the shared data in one place.

Prop drilling is the practice of passing props through many intermediate components that do not use them, just to reach a deeply nested child. It can be reduced by using React Context, composition, or a state management library.

State setters in React do not update the state immediately; they schedule an update. Reading state right after calling the setter returns the old value. If the next state depends on the previous one, you should pass a function to the setter.

The setter returned by useState can accept a function instead of a value. The function receives the previous state and returns the next state. This form is safer when updates depend on the current state, especially with batching and concurrent updates.

State colocation is the practice of keeping state as close as possible to the components that actually use it. It is React's default recommendation and avoids unnecessary re-renders in unrelated parts of the tree.

Unidirectional data flow means data moves in a single direction: from parent components down to children through props. Children communicate upward by calling callback functions passed as props. This makes data changes predictable and easier to debug.

defaultProps lets you define default values for props that are not passed by the parent. In modern functional components, default parameter values in the function signature are typically used instead. ---