diff --git a/docs/ff-concepts/state-management/imgs/rebuild.avif b/docs/ff-concepts/state-management/imgs/rebuild.avif new file mode 100644 index 00000000..d699e169 Binary files /dev/null and b/docs/ff-concepts/state-management/imgs/rebuild.avif differ diff --git a/docs/ff-concepts/state-management/state-variables.md b/docs/ff-concepts/state-management/state-variables.md index 891afe16..329abfcf 100644 --- a/docs/ff-concepts/state-management/state-variables.md +++ b/docs/ff-concepts/state-management/state-variables.md @@ -49,5 +49,14 @@ You can learn more about state management from this video: ::: +## Rebuild [Action] +The **Rebuild** action allows you to refresh a page or a component’s UI. This is especially useful when data changes dynamically; for example, after an API call, a database update, a custom action, or a class method modifies the internal state, and you want the latest data or UI state to be reflected instantly. +The Rebuild action provides different update types depending on where it is used: + +- **Rebuild Page:** When on a page, you will see the **Rebuild Current Page** option, which refreshes the entire page’s UI. +- **Rebuild Component:** When on a component, you will see the **Rebuild Current Component** option, which refreshes only that specific component. + - **Rebuild Containing Page:** When on a component, you will see this option as well, which refreshes the entire page that contains the component. For example, if you have a **"Confirm"** button inside a dialog component that updates an order’s status, selecting this action will refresh the parent page to instantly show the updated order list. + +![rebuild](imgs/rebuild.avif) \ No newline at end of file diff --git a/docs/resources/data-representation/app-state.md b/docs/resources/data-representation/app-state.md index ccd0c6cd..f022f034 100644 --- a/docs/resources/data-representation/app-state.md +++ b/docs/resources/data-representation/app-state.md @@ -114,6 +114,10 @@ Here's a quick guide to updating the app state variable. We need to add an actio +:::tip +If you want to rebuild a page or component without updating any state variables, use the [**Rebuild**](../../ff-concepts/state-management/state-variables.md#rebuild-action) state action. +::: + ## FAQs
diff --git a/docs/resources/ui/components/component-lifecycle.md b/docs/resources/ui/components/component-lifecycle.md index de3811bf..168b8f3d 100644 --- a/docs/resources/ui/components/component-lifecycle.md +++ b/docs/resources/ui/components/component-lifecycle.md @@ -249,6 +249,10 @@ Type** property in your Action properties. Here's what it means: - **No Rebuild:** Choose this option when you need to update the state value without immediately reflecting the changes in the UI. +:::tip +If you want to rebuild a component without updating any state variables, use the [**Rebuild**](../../../ff-concepts/state-management/state-variables.md#rebuild-action) state action. +::: + :::warning[Expensive Rebuilds] Too many rebuilds can impact performance because rebuilding the widget tree frequently consumes resources and may lead to decreased responsiveness and diff --git a/docs/resources/ui/pages/page-lifecycle.md b/docs/resources/ui/pages/page-lifecycle.md index c3f44f58..ec68090b 100644 --- a/docs/resources/ui/pages/page-lifecycle.md +++ b/docs/resources/ui/pages/page-lifecycle.md @@ -327,13 +327,17 @@ update, create a new Action called **Update Page State**. When updating your page state in Flutter, you'll often come across the **Update Type** property in your Action properties. Here's what it means: -**Rebuild Current Type:** This option triggers a re-rendering of the page, +**Rebuild Current Page:** This option triggers a re-rendering of the page, ensuring that any changes to the state are reflected in the user interface (UI). **No Rebuild:** Choose this option when you need to update the state without immediately reflecting the changes in the UI. +:::tip +If you want to rebuild a page without updating any state variables, use the [**Rebuild**](../../../ff-concepts/state-management/state-variables.md#rebuild-action) state action. +::: + :::warning[Expensive Rebuilds] Too many rebuilds can impact performance because rebuilding the widget tree frequently consumes resources and may lead to decreased responsiveness and