# @Consume and @Provide
As the data provider, **Provide** can update the data of its child nodes and trigger page rendering. After **Consume** detects that the **Provide** data is updated, the current view is re-rendered.
**Table 1** @Provide
Type
Description
Decorator parameters
Alias: a constant of the string type. If an alias is specified, implement the data update with this alias. If there is no alias, use the variable name as the alias. @Provide("alias") is recommended.
Synchronization mechanism
The @Provide annotated variable is similar to the @state variable. You can modify the variable to re-render the page. You can also modify the @Consume annotated variable to modify the @State annotated variable reversely.
Initial value
The initial value must be set.
Page re-rendering scenarios
1. Primitive types: boolean, string, and number
2. @observed annotated class: Modify the attributes of the class.
3. Array: Add, delete, or update elements in an array.
**Table 2** @Consume
Type
Description
Initial value
No default value can be set.
> **NOTE:**
>When using **@Provide** and **@Consume**, take measures to avoid infinite loops caused by circular reference.
The description of other attributes is the same as that of **@Provide**.
```
@Entry
@Component
struct CompA {
@Provide("reviewVote") reviewVotes : number = 0;
build() {
Column() {
CompB()
Button() {
Text(`${this.reviewVotes}`)
.fontSize(30)
}
.onClick(() => {
this.reviewVotes += 1;
})
}
}
}
@Component
struct CompB {
build() {
Column() {
CompC()
}
}
}
@Component
struct CompC {
@Consume("reviewVote") reviewVotes : number;
build() {
Column() {
Button() {
Text(`${this.reviewVotes}`)
.fontSize(30)
}
.onClick(() => {
this.reviewVotes += 1;
})
}
}
}
```