ยกสถานะขึ้นด้วย value และ onValueChange

State hoisting means moving state out of a Composable up to its caller. The component becomes stateless and the parent stays in charge.

Replace internal state with two parameters: a value to display and an onValueChange callback to report changes.

Data flows down through value; user actions flow up through onValueChange. This one-way loop is called unidirectional data flow. ↕️

The parent owns the state with remember and passes it in. The child never stores it, so two callers can drive the same component differently.

The value parameter is what the component shows right now. It is read-only to the child; the child never edits it directly.

When the user types, the child calls onValueChange(newText). The parent decides whether and how to update its state.

A stateless child cannot just reassign value, it is only an input. Reporting the change upward keeps a single owner in control.

This is a controlled component: the parent fully decides what shows. You can transform, ignore, or validate input before storing it.

Because the field is hoisted, you can drop it into a login screen, a search bar, or a settings page, each with its own owning state.

The pattern fits any state: a checked Boolean with onCheckedChange, a selected item with onSelect. Same idea, different names.

Hoist state to the lowest common parent that needs to read or change it, no higher. That keeps ownership clear and code clean.

In the hoisting pattern, what does the child do when the user types?

Hoisting swaps internal state for value plus onValueChange. State flows down, events flow up, and the parent stays in charge. 🚀