# Generated Code: Components

> 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/generated-code/component-model

Similar to a Page, when creating a component in FlutterFlow Studio, it automatically generates two files: a Widget class and a Model class.

Similar to a [**Page**](https://docs.flutterflow.io/generated-code/page-model), when creating a **[component](https://docs.flutterflow.io/resources/ui/components)** in FlutterFlow Studio, it automatically generates two files: a `Widget` class and a `Model` class. 

:::note[Prerequisites]
This guide uses examples from the generated code of the **[EcommerceFlow demo app](https://bit.ly/ff-docs-demo-v2)**. To view the generated code directly, check out the **[Github repository](https://github.com/FlutterFlow/sample-apps/tree/main/ecommerce_flow)**.
:::

## ComponentModel class

`ComponentModel` classes are responsible for managing the state and behavior of individual components used within a page. These classes extend the `FlutterFlowModel` class, providing a consistent structure and shared functionality across all component models. This ensures that each component's state is isolated and reusable, making the app easier to maintain and scale.

The lifecycle of a `ComponentModel` and its associated widget class follows the same structure as a page. For more details, refer to the documentation on **[Generated Pages](https://docs.flutterflow.io/generated-code/page-model)**.

### onComponentLoad Action: Generated Code

When you define actions for the `onComponentLoad` action trigger of a component, these actions are added inside an `addPostFrameCallback` method within the page's `initState` method. This ensures that the actions are executed only after the initial widget tree is built.

```js
 @override
  void initState() {
    super.initState();
    _model = createModel(context, () => ProductListPageModel());

    // On component load action.
    SchedulerBinding.instance.addPostFrameCallback((_) async {
        await _model.updateTotalCost(context);
        safeSetState(() {});
    });
    
  }
```