---
title: "Managing Component State"
description: "Read, initialize, and update object-table and list state without repeating configuration."
permalink: /docs/guides/common-app-patterns/managing-component-state/
---
# Managing Component State
Use state management to remember a table's filters or page, or to change a list after it has loaded. For ordinary display, the components manage their state automatically.
| Mechanism | Use |
| --- | --- |
| `on-state-change` | Read the component's state when it changes. Pass `$state` to your handler. |
| `init-state` | Supply initial state when the component loads. |
| `setState()` | Change state in response to an action after loading. Requires a component `id`. |
## Remember table state
This example retains the state in the view's JavaScript context while that view remains on the navigation stack. It assumes a `user` model with a `name` field.
```xml
{name}
```
```javascript
var savedTableState = null;
function init() {
view.users = DB.user.all();
}
function rememberTableState(state) {
savedTableState = state;
}
function initialTableState() {
return savedTableState || { page: 1 };
}
```
To preserve preferences beyond this view's lifetime, store the state in an appropriate longer-lived location and return it from `initialTableState()`.
## Changing the state from JavaScript/TypeScript
For example, call this handler from a button to clear global search and return to page 1:
```javascript
function resetSearch() {
component.objectTable({ id: 'users-table' }).setState({ page: 1, search: '' });
}
```
For a list, use `component.list({ id: 'my-list' }).setState({ page: 1, search: '' })` and give the list `id="my-list"`.
Use `init-state` for initial values and `setState()` for specific later actions. Avoid calling `setState()` repeatedly during view updates.
## State reference