# Component Composition — Storybook: Component-Driven UI Development

Source: https://www.skillbyai.com/hi/storybook/sb-component-composition

> Data flow test करने और जटिल component hierarchies को आसान रखने के लिए stories में parent और child components compose करें।

## Stories में components को compose करना

आप एक story में कई components को एक साथ compose कर सकते हैं कि वे कैसे interact करते हैं। यह parent-child relationships और data flow को test करने के लिए विशेष रूप से उपयोगी है।

## List component को compose करना

यहाँ बताया गया है कि List component को Item children के साथ कैसे test करें।

```tsx
import { List, ListItem } from './List';

export default {
  component: List,
  title: 'Components/List',
};

export const WithItems = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);

export const Empty = () => <List />;
export const Loading = () => <List loading />;
```

## Data flow को test करना

Stories आपको test करने देते हैं कि components कैसे different data, callbacks, और state changes को handle करते हैं बिना full application चलाए।

## Over-composition से बचें

Composed stories को simple और focused रखें। अगर एक story बहुत complex हो जाता है, इसे छोटे components में तोड़ दें।