# Component Actions & Lifecycle > This page is about FlutterFlow Studio (the visual builder), not FlutterFlow (the app builder you use by describing your app). URL: https://docs.flutterflow.io/resources/ui/components/component-lifecycle In FlutterFlow Studio, understanding the component lifecycle is crucial for managing state and optimizing your In FlutterFlow Studio, understanding the component lifecycle is crucial for managing state and optimizing your app's performance. Let's delve into the key moments in the lifecycle of a **Component**: - **Creation**: Component instances are created dynamically when they are used within a page or another component. This means that component instances are created as needed, which helps manage resources efficiently and avoid unnecessary overhead. - **Initialization:** Actions defined in the `On Initialization` **Action Trigger** are executed during this phase. For instance, you can initialize local state variables with initial values, or start component animations in this phase. At this stage, component state variables with their default values (if any) are also created. These variables hold data specific to the component, such as form inputs or toggle states, and are essential for managing the component’s internal state. - **Updating:** While in use, the component can receive updated parameters from its parent when the parent rebuilds itself, allowing the component to adjust its behavior and appearance accordingly. When updating state variables inside a component, you can choose to rebuild only the component itself or the entire page containing the given component. This dynamic updating is crucial for maintaining a responsive and interactive user experience. - **Disposal:** When the component is no longer needed, such as when a user navigates away from the page or the component is explicitly removed, it is destroyed. In FlutterFlow Studio, most of these lifecycle stages are handled internally by FlutterFlow Studio's architecture. However, FlutterFlow Studio exposes some lifecycle methods so that you, as a developer, can decide what additional configurations to load upon initialization and when to re-render the UI based on interactions. Let's look at them in the following sections: ## Initialization Action Triggers During the initialization of a **Component**, FlutterFlow Studio exposes the `On Initialization` **Action Trigger** that assists you in loading resources or initializing data when the Component is loaded in a Page or a Component. :::note[What are Action Triggers?] **Action Triggers** serve as event listeners or handlers that respond to specific events or user interactions within an application. FlutterFlow Studio provides developers with a way to define logic that responds to various events, such as button clicks, page loads, form submissions, or data changes. To learn more, see the [**Action Flow Editor**](https://docs.flutterflow.io/resources/functions/action-flow-editor) section. ::: As you open the Action Flow Editor for your Component, you can see the `On Initialization` **Action Trigger** exposed for your **Component**. ### On Initialization [Action Trigger] The `On Initialization` action trigger in FlutterFlow Studio allows you to define actions that should occur when a component loads or is initialized, such as setting up necessary data, state variables, or other initialization tasks. If the component stops being shown in the UI and then becomes visible again, the actions under the **On Initialization** action trigger will run again so any setup tasks are re-executed. For dynamically generated components, such as those in a ListView with a query, each instance will trigger the actions under `On Initialization` action trigger when it is created. ### On Shortcut Press [Action Trigger] Your component can also respond to certain keypress events. For more details on setting this up, see [this section on keyboard shortcuts](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#on-shortcut-press-action-trigger). ### On Dispose [Action Trigger] The **On Dispose** action trigger for components allows you to define actions that execute when the page containing the component is navigated away or removed from memory. It is particularly useful for stopping ongoing operations. Imagine a scenario where a [periodic action](https://docs.flutterflow.io/resources/time-based-logic/periodic-action), such as fetching live weather updates, is started in a component when it is loaded (i.e., [On Initialization](#on-initialization-action-trigger)). The action runs periodically, providing real-time data updates as long as the component is active. However, when the page containing the component is navigated away, you need to stop the periodic action to conserve resources and prevent unnecessary processing. By using the **On Dispose** action trigger, you can safely stop the periodic updates and clean up any associated resources. :::note The **On Dispose** action trigger always runs before the [**parent page’s On Dispose**](https://docs.flutterflow.io/resources/ui/pages/page-lifecycle#on-dispose-action-trigger). This ensures that the component cleans up its resources first, allowing the parent to finalize its disposal without dependencies on the child. ::: ## Component State :::note[STATE VARIABLES] A state variable holds information or data about your UI at any given moment. To learn more about **states and state management, [refer to this guide.](https://docs.flutterflow.io/concepts/state-management)** ::: **Component state** refers to the information that a component tracks about its current condition or the data it manages internally. This can include data such as whether a button is enabled, the value of a slider, or the entries in a dynamically updated list. Component state variables are only accessible within the current component's scope. This type of variable is particularly useful for storing data that affects how the component behaves or appears, such as toggling UI elements, keeping track of user choices within the component, or caching data pertinent to the component's functionality. For example: - In a custom drop-down menu component, you might use a component state variable to keep track of which item is currently selected. - In a toggle switch component, you could use a component state variable to store the on/off state based on user interaction. This approach ensures that the state of the component is maintained as it interacts with the user or other parts of the application. When a component state variable changes, the component can be re-rendered with the updated values, displaying the latest state of the component with these updates. ### Creating a Component State To create a new **Component State variable** in your component, follow these steps:
When creating Component State, the following properties are included: - **Is List:** This property determines whether the variable can hold multiple values of the same data type (like a list or array) or just a single value. - **Initial Field Value:** This property sets the default value for the variable when it is first created. It's like setting the starting point or the value that the variable begins with before anything else happens. - **Nullable:** This property determines whether the variable can have a null value. When "**Nullable**" is set to true, it means the variable can be empty or have a null value. This is useful when dealing with optional data or scenarios where the absence of a value is valid. Now, apply these concepts to the `isFavourite` variable in the context of the above example: - For the `isFavourite` variable, it is a single value (boolean), so **Is List** would be set to false. - Set the **Initial Field Value** to **false**, indicating that the item is not favorited by default. - Set the **Nullable** property to false, as the variable should always have a boolean value (true or false) and never be null. :::note You can set the **Data Type** of your Component State variable to primitive data types such as **String, Integer, Boolean,** or **Double**, or complex built-in data types such as **Enum, Custom Data Type,** or **Document**. To learn more about the available data types, refer to the [**Data Representation section**](https://docs.flutterflow.io/resources/data-representation). ::: ### Get Component State Value In the following example, we demonstrate how to toggle the heart icon from an outlined to a filled icon based on the `isFavourite` state variable. We introduce a `Conditional Builder` widget that allows us to show a widget tree based on **If/Else If/Else** conditions. The goal is to visually indicate whether a product has been favorited by the user. Follow these steps:
### Update Component State [Action] **Component state** values can only be updated via actions. Whenever you want to update the component state, add an **Update Component State** action from the Action Flow Editor of the component. In the following demo, we open the Action Flow Editor on the parent widget `Conditional Builder` and call the **Update Component State** action to toggle the value of `isFavourite`.
#### Rebuild on Update When updating your component state in FlutterFlow Studio, you'll often come across the **Update Type** property in your action properties. Here's what it means: - **Rebuild Containing Page:** This option triggers a re-rendering of the page containing this component. - **Rebuild Current Component:** This option triggers a re-rendering of the current component only. - **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**](https://docs.flutterflow.io/concepts/state-management#rebuild-action) state action. ::: :::caution[Expensive Rebuilds] Too many rebuilds can impact performance because rebuilding the widget tree frequently consumes resources and may lead to decreased responsiveness and increased battery usage. Therefore, it's essential to consider the trade-offs and use rebuilds judiciously to maintain optimal app performance. To learn more about what happens behind the scenes, refer to the [**Generated Code: Components**](https://docs.flutterflow.io/generated-code/component-model) section. :::