Jetpack Compose Academy · レッスン

valueとonValueChangeで状態をホイスティングする

状態を下へ渡し、イベントを上へ返します。

「valueとonValueChangeで状態をホイスティングする」はCoddyKit上の無料Jetpack Compose Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJetpack Compose Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Jetpack Compose Academyコースには全4レッスンが含まれています。

このレッスンの一部はまだ翻訳されておらず、英語で表示されています。

State Hoisting in One Line

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

The Core Pattern

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

fun NameField(value: String, onValueChange: (String) -> Unit) {
  TextField(value = value, onValueChange = onValueChange)
}

State Down, Events Up

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

Who Owns the State Now

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.

var name by remember { mutableStateOf("") }
NameField(value = name, onValueChange = { name = it })

value: The Read Side

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

onValueChange: The Write Side

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

Why Not Edit In Place

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

Controlled Components

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

NameField(value = name, onValueChange = { name = it.uppercase() })

Reusing the Same Field

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.

Hoisting Beyond Text

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

fun ToggleRow(checked: Boolean, onCheckedChange: (Boolean) -> Unit) {
  Switch(checked = checked, onCheckedChange = onCheckedChange)
}

A Simple Rule

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

Quick Check

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

Recap

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

よくある質問

「valueとonValueChangeで状態をホイスティングする」レッスンは無料ですか？

はい。「valueとonValueChangeで状態をホイスティングする」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Jetpack Compose Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Jetpack Compose Academyコースには全4レッスンが含まれています。

「valueとonValueChangeで状態をホイスティングする」で何を学びますか？

状態を下へ渡し、イベントを上へ返します。ブラウザで直接実行するハンズオンコードでJetpack Compose Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Jetpack Compose Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJetpack Compose Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「valueとonValueChangeで状態をホイスティングする」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJetpack Compose Academyレッスンでコードを書いて実行できますか？

はい。すべてのJetpack Compose Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Jetpack Compose Academyに戻る