1# Reuse ID
2
3**reuseId** is an ID that identifies the reuse group of a custom component. The reuse framework identifies and groups reusable custom components based on their reuse IDs.
4
5>  **NOTE**
6>
7> This attribute is supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## reuseId
11
12reuseId(id: string)
13
14Sets the ID that identifies the reuse group of the component.
15
16**Atomic service API**: This API can be used in atomic services since API version 11.
17
18**System capability**: SystemCapability.ArkUI.ArkUI.Full
19
20**Parameters**
21
22| Name| Type  | Mandatory| Description                                  |
23| ------ | ------ | ---- | -------------------------------------- |
24| id     | string | Yes  | ID that identifies the reuse group of the component.|
25
26## Example
27
28This example demonstrates how to use **reused** to identify the reuse group of a custom component.
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct MyComponent {
35  @State switch: boolean = true;
36  private type: string = "type1";
37
38  build() {
39    Column() {
40      Button("ChangeType")
41        .onClick(() => {
42          this.type = "type2"
43        })
44      Button("Switch")
45        .onClick(() => {
46          this.switch = !this.switch
47        })
48      if (this.switch) {
49        ReusableChildComponent({ type: this.type })
50          .reuseId(this.type)
51      }
52    }
53    .width('100%')
54    .height('100%')
55  }
56}
57
58@Reusable
59@Component
60struct ReusableChildComponent {
61  @State type: string = ''
62
63  aboutToAppear() {
64    console.log(`ReusableChildComponent Appear ${this.type}`)
65  }
66
67  aboutToReuse(params: ESObject) {
68    console.log(`ReusableChildComponent Reuse ${this.type}`)
69    this.type = params.type;
70  }
71
72  build() {
73    Row() {
74      Text(this.type)
75        .fontSize(20)
76        .margin({ left: 10 })
77    }.margin({ left: 10, right: 10 })
78  }
79}
80```
81