React Component Communication Patterns

Implement Parent-Child Communication

Create a parent component that passes a message prop to a child component, and the child sends a response back using a callback.

Expected output: Child component displays the message and triggers a callback to alert the parent.

Hint: Use props to pass the message and a callback function for the response.

Use React Context to Share Theme

Create a ThemeContext and use it to provide a theme value to multiple nested components without passing props.

Expected output: Nested components render with styles based on the shared theme.

Hint: Use React.createContext, Provider, and useContext hook.

React components communicate primarily via props for passing data down, callbacks for sending data or events up, and the Context API for sharing data globally without prop drilling.

Prop drilling is passing props through many intermediate components that do not need the data. It can be avoided by using React Context to provide data directly to the components that need it.

Use React Context when multiple components at different levels need access to the same data, especially to avoid passing props through many layers.