Q1. What is component composition in React?
Component composition is the practice of combining smaller, reusable components to build more complex UIs. Instead of inheritance, React uses composition to reuse code. You can nest components, pass components as props, or use children props to create flexible hierarchies.
Q2. How do you use the children prop?
The children prop allows you to pass elements or components as content between opening and closing tags. Example: . In the Card component, {props.children} renders the nested content. This is useful for creating wrapper components.
This is inside card
Q3. What are specialized components?
Specialization occurs when a component is a more specific case of a general component. For example, a Dialog component might be a general modal, while a WelcomeDialog is a specialized version that uses composition to add specific content. This is achieved by passing props or children.
Q4. How does composition differ from inheritance in React?
React recommends composition over inheritance. Composition builds complex components by combining simpler ones, while inheritance creates a hierarchy where child classes extend parent classes. Composition is more flexible and avoids tight coupling. React components are designed to work with composition (props, children, HOCs).
Q5. Can you pass components as props?
Yes, you can pass components as props. This is useful for creating flexible containers. For example, you can pass a Header and Footer component to a Layout component via props. This pattern is often used in higher-order components or render props.