1# API Guidelines for Jetpack Compose 2 3## Last updated: March 10, 2021 4 5# Who this document is for 6 7The Compose API guidelines outline the patterns, best practices and prescriptive style guidelines for writing idiomatic Jetpack Compose APIs. As Jetpack Compose code is built in layers, everyone writing code that uses Jetpack Compose is building their own API to consume themselves. 8 9This document assumes a familiarity with Jetpack Compose's runtime APIs including `@Composable`, `remember {}` and `CompositionLocal`. 10 11The requirement level of each of these guidelines is specified using the terms set forth in [RFC2119](https://www.ietf.org/rfc/rfc2119.txt) for each of the following developer audiences. If an audience is not specifically named with a requirement level for a guideline, it should be assumed that the guideline is OPTIONAL for that audience. 12 13## Jetpack Compose framework development 14 15Contributions to the `androidx.compose` libraries and tools generally follow these guidelines to a strict degree in order to promote consistency, setting expectations and examples for consumer code at all layers. 16 17## Library development based on Jetpack Compose 18 19It is expected and desired that an ecosystem of external libraries will come to exist that target Jetpack Compose, exposing a public API of `@Composable` functions and supporting types for consumption by apps and other libraries. While it is desirable for these libraries to follow these guidelines to the same degree as Jetpack Compose framework development would, organizational priorities and local consistency may make it appropriate for some purely stylistic guidelines to be relaxed. 20 21## App development based on Jetpack Compose 22 23App development is often subject to strong organizational priorities and norms as well as requirements to integrate with existing app architecture. This may call for not only stylistic deviation from these guidelines but structural deviation as well. Where possible, alternative approaches for app development will be listed in this document that may be more appropriate in these situations. 24 25# Kotlin style 26 27## Baseline style guidelines 28 29**Jetpack Compose framework development** MUST follow the Kotlin Coding Conventions outlined at https://kotlinlang.org/docs/reference/coding-conventions.html as a baseline with the additional adjustments described below. 30 31**Jetpack Compose Library and app development** SHOULD also follow this same guideline. 32 33### Why 34 35The Kotlin Coding Conventions establish a standard of consistency for the Kotlin ecosystem at large. The additional style guidelines that follow in this document for Jetpack Compose account for Jetpack Compose's language-level extensions, mental models, and intended data flows, establishing consistent conventions and expectations around Compose-specific patterns. 36 37## Singletons, constants, sealed class and enum class values 38 39**Jetpack Compose framework development** MUST name deeply immutable constants following the permitted object declaration convention of `PascalCase` as documented [here](https://kotlinlang.org/docs/reference/coding-conventions.html#property-names) as a replacement for any usage of `CAPITALS_AND_UNDERSCORES`. Enum class values MUST also be named using `PascalCase` as documented in the same section. 40 41**Library development** SHOULD follow this same convention when targeting or extending Jetpack Compose. 42 43**App Development** MAY follow this convention. 44 45### Why 46 47Jetpack Compose discourages the use and creation of singletons or companion object state that cannot be treated as _stable_ over time and across threads, reducing the usefulness of a distinction between singleton objects and other forms of constants. This forms a consistent expectation of API shape for consuming code whether the implementation detail is a top-level `val`, a `companion object`, an `enum class`, or a `sealed class` with nested `object` subclasses. `myFunction(Foo)` and `myFunction(Foo.Bar)` carry the same meaning and intent for calling code regardless of specific implementation details. 48 49Library and app code with a strong existing investment in `CAPITALS_AND_UNDERSCORES` in their codebase MAY opt for local consistency with that pattern instead. 50 51### Do 52 53```kotlin 54const val DefaultKeyName = "__defaultKey" 55 56val StructurallyEqual: ComparisonPolicy = StructurallyEqualsImpl(...) 57 58object ReferenceEqual : ComparisonPolicy { 59 // ... 60} 61 62sealed class LoadResult<T> { 63 object Loading : LoadResult<Nothing>() 64 class Done(val result: T) : LoadResult<T>() 65 class Error(val cause: Throwable) : LoadResult<Nothing>() 66} 67 68enum class Status { 69 Idle, 70 Busy 71} 72``` 73 74### Don't 75 76```kotlin 77const val DEFAULT_KEY_NAME = "__defaultKey" 78 79val STRUCTURALLY_EQUAL: ComparisonPolicy = StructurallyEqualsImpl(...) 80 81object ReferenceEqual : ComparisonPolicy { 82 // ... 83} 84 85sealed class LoadResult<T> { 86 object Loading : LoadResult<Nothing>() 87 class Done(val result: T) : LoadResult<T>() 88 class Error(val cause: Throwable) : LoadResult<Nothing>() 89} 90 91enum class Status { 92 IDLE, 93 BUSY 94} 95``` 96 97# Compose baseline 98 99The Compose compiler plugin and runtime establish new language facilities for Kotlin and the means to interact with them. This layer adds a declarative programming model for constructing and managing mutable tree data structures over time. Compose UI is an example of one type of tree that the Compose runtime can manage, but it is not limited to that use. 100 101This section outlines guidelines for `@Composable` functions and APIs that build on the Compose runtime capabilities. These guidelines apply to all Compose runtime-based APIs, regardless of the managed tree type. 102 103## Naming Unit @Composable functions as entities 104 105**Jetpack Compose framework development and Library development** MUST name any function that returns `Unit` and bears the `@Composable` annotation using `PascalCase`, and the name MUST be that of a noun, not a verb or verb phrase, nor a nouned preposition, adjective or adverb. Nouns MAY be prefixed by descriptive adjectives. This guideline applies whether the function emits UI elements or not. 106 107**App development** SHOULD follow this same convention. 108 109### Why 110 111Composable functions that return `Unit` are considered _declarative entities_ that can be either _present_ or _absent_ in a composition and therefore follow the naming rules for classes. A composable's presence or absence resulting from the evaluation of its caller's control flow establishes both persistent identity across recompositions and a lifecycle for that persistent identity. This naming convention promotes and reinforces this declarative mental model. 112 113### Do 114 115```kotlin 116// This function is a descriptive PascalCased noun as a visual UI element 117@Composable 118fun FancyButton(text: String, onClick: () -> Unit) { 119``` 120 121### Do 122 123```kotlin 124// This function is a descriptive PascalCased noun as a non-visual element 125// with presence in the composition 126@Composable 127fun BackButtonHandler(onBackPressed: () -> Unit) { 128``` 129 130### Don't 131 132```kotlin 133// This function is a noun but is not PascalCased! 134@Composable 135fun fancyButton(text: String, onClick: () -> Unit) { 136``` 137 138### Don't 139 140```kotlin 141// This function is PascalCased but is not a noun! 142@Composable 143fun RenderFancyButton(text: String, onClick: () -> Unit) { 144``` 145 146### Don't 147 148```kotlin 149// This function is neither PascalCased nor a noun! 150@Composable 151fun drawProfileImage(image: ImageAsset) { 152``` 153 154## Naming @Composable functions that return values 155 156**Jetpack Compose framework development and Library development** MUST follow the standard [Kotlin Coding Conventions for the naming of functions](https://kotlinlang.org/docs/reference/coding-conventions.html#function-names) for any function annotated `@Composable` that returns a value other than `Unit`. 157 158**Jetpack Compose framework development and Library development** MUST NOT use the factory function exemption in the [Kotlin Coding Conventions for the naming of functions](https://kotlinlang.org/docs/reference/coding-conventions.html#function-names) for naming any function annotated `@Composable` as a PascalCase type name matching the function's abstract return type. 159 160### Why 161 162While useful and accepted outside of `@Composable` functions, this factory function convention has drawbacks that set inappropriate expectations for callers when used with `@Composable` functions. 163 164Primary motivations for marking a factory function as `@Composable` include using composition to establish a managed lifecycle for the object or using `CompositionLocal`s as inputs to the object's construction. The former implies the use of Compose's `remember {}` API to cache and maintain the object instance across recompositions, which can break caller expectations around a factory operation that reads like a constructor call. (See the next section.) The latter motivation implies unseen inputs that should be expressed in the factory function name. 165 166Additionally, the mental model of `Unit`-returning `@Composable` functions as declarative entities should not be confused with a, "virtual DOM" mental model. Returning values from `@Composable` functions named as `PascalCase` nouns promotes this confusion, and may promote an undesirable style of returning a stateful control surface for a present UI entity that would be better expressed and more useful as a hoisted state object. 167 168More information about state hoisting patterns can be found in the design patterns section of this document. 169 170### Do 171 172```kotlin 173// Returns a style based on the current CompositionLocal settings 174// This function qualifies where its value comes from 175@Composable 176fun defaultStyle(): Style { 177``` 178 179### Don't 180 181```kotlin 182// Returns a style based on the current CompositionLocal settings 183// This function looks like it's constructing a context-free object! 184@Composable 185fun Style(): Style { 186``` 187 188## Naming @Composable functions that remember {} the objects they return 189 190**Jetpack Compose framework development and Library development** MUST prefix any `@Composable` factory function that internally `remember {}`s and returns a mutable object with the prefix `remember`. 191 192**App development** SHOULD follow this same convention. 193 194### Why 195 196An object that can change over time and persists across recompositions carries observable side effects that should be clearly communicated to a caller. This also signals that a caller does not need to duplicate a `remember {}` of the object at the call site to attain this persistence. 197 198### Do 199 200```kotlin 201// Returns a CoroutineScope that will be cancelled when this call 202// leaves the composition 203// This function is prefixed with remember to describe its behavior 204@Composable 205fun rememberCoroutineScope(): CoroutineScope { 206``` 207 208### Don't 209 210```kotlin 211// Returns a CoroutineScope that will be cancelled when this call leaves 212// the composition 213// This function's name does not suggest automatic cancellation behavior! 214@Composable 215fun createCoroutineScope(): CoroutineScope { 216``` 217 218Note that returning an object is not sufficient to consider a function to be a factory function; it must be the function's primary purpose. Consider a `@Composable` function such as `Flow<T>.collectAsState()`; this function's primary purpose is to establish a subscription to a `Flow`; that it `remember {}`s its returned `State<T>` object is incidental. 219 220## Naming CompositionLocals 221 222A `CompositionLocal` is a key into a composition-scoped key-value table. `CompositionLocal`s may be used to provide global-like values to a specific subtree of composition. 223 224**Jetpack Compose framework development and Library development** MUST NOT name `CompositionLocal` keys using "CompositionLocal" or "Local" as a noun suffix. `CompositionLocal` keys should bear a descriptive name based on their value. 225 226**Jetpack Compose framework development and Library development** MAY use "Local" as a prefix for a `CompositionLocal` key name if no other, more descriptive name is suitable. 227 228### Do 229 230```kotlin 231// "Local" is used here as an adjective, "Theme" is the noun. 232val LocalTheme = staticCompositionLocalOf<Theme>() 233``` 234 235### Don't 236 237```kotlin 238// "Local" is used here as a noun! 239val ThemeLocal = staticCompositionLocalOf<Theme>() 240``` 241 242## Stable types 243 244The Compose runtime exposes two annotations that may be used to mark a type or function as _stable_ - safe for optimization by the Compose compiler plugin such that the Compose runtime may skip calls to functions that accept only safe types because their results cannot change unless their inputs change. 245 246The Compose compiler plugin may infer these properties of a type automatically, but interfaces and other types for which stability can not be inferred, only promised, may be explicitly annotated. Collectively these types are called, "stable types." 247 248**`@Immutable`** indicates a type where the value of any properties will **never** change after the object is constructed, and all methods are **referentially transparent**. All Kotlin types that may be used in a `const` expression (primitive types and Strings) are considered `@Immutable`. 249 250**`@Stable`** when applied to a type indicates a type that is **mutable**, but the Compose runtime will be notified if and when any public properties or method behavior would yield different results from a previous invocation. (In practice this notification is backed by the `Snapshot` system via `@Stable` `MutableState` objects returned by `mutableStateOf()`.) Such a type may only back its properties using other `@Stable` or `@Immutable` types. 251 252**Jetpack Compose framework development, Library development and App development** MUST ensure in custom implementations of `.equals()` for `@Stable` types that for any two references `a` and `b` of `@Stable` type `T`, `a.equals(b)` MUST **always** return the same value. This implies that any **future** changes to `a` must also be reflected in `b` and vice versa. 253 254This constraint is always met implicitly if `a === b`; the default reference equality implementation of `.equals()` for objects is always a correct implementation of this contract. 255 256**Jetpack Compose framework development and Library development** SHOULD correctly annotate `@Stable` and `@Immutable` types that they expose as part of their public API. 257 258**Jetpack Compose framework development and Library development** MUST NOT remove the `@Stable` or `@Immutable` annotation from a type if it was declared with one of these annotations in a previous stable release. 259 260**Jetpack Compose framework development and Library development** MUST NOT add the `@Stable` or `@Immutable` annotation to an existing non-final type that was available in a previous stable release without this annotation. 261 262### Why? 263 264`@Stable` and `@Immutable` are behavioral contracts that impact the binary compatibility of code generated by the Compose compiler plugin. Libraries should not declare more restrictive contracts for preexisting non-final types that existing implementations in the wild may not correctly implement, and similarly they may not declare that a library type no longer obeys a previously declared contract that existing code may depend upon. 265 266Implementing the stable contract incorrectly for a type annotated as `@Stable` or `@Immutable` will result in incorrect behavior for `@Composable` functions that accept that type as a parameter or receiver. 267 268## Emit XOR return a value 269 270`@Composable` functions should either emit content into the composition or return a value, but not both. If a composable should offer additional control surfaces to its caller, those control surfaces or callbacks should be provided as parameters to the composable function by the caller. 271 272**Jetpack Compose framework development and Library development** MUST NOT expose any single `@Composable` function that both emits tree nodes and returns a value. 273 274### Why 275 276Emit operations must occur in the order the content is to appear in the composition. Using return values to communicate with the caller restricts the shape of calling code and prevents interactions with other declarative calls that come before it. 277 278### Do 279 280```kotlin 281// Emits a text input field element that will call into the inputState 282// interface object to request changes 283@Composable 284fun InputField(inputState: InputState) { 285// ... 286 287// Communicating with the input field is not order-dependent 288val inputState = remember { InputState() } 289 290Button("Clear input", onClick = { inputState.clear() }) 291 292InputField(inputState) 293``` 294 295### Don't 296 297```kotlin 298// Emits a text input field element and returns an input value holder 299@Composable 300fun InputField(): UserInputState { 301// ... 302 303// Communicating with the InputField is made difficult 304Button("Clear input", onClick = { TODO("???") }) 305val inputState = InputField() 306``` 307 308Communicating with a composable by passing parameters forward affords aggregation of several such parameters into types used as parameters to their callers: 309 310```kotlin 311interface DetailCardState { 312 val actionRailState: ActionRailState 313 // ... 314} 315 316@Composable 317fun DetailCard(state: DetailCardState) { 318 Surface { 319 // ... 320 ActionRail(state.actionRailState) 321 } 322} 323 324@Composable 325fun ActionRail(state: ActionRailState) { 326 // ... 327} 328``` 329 330For more information on this pattern, see the sections on [hoisted state types](#hoisted-state-types) in the Compose API design patterns section below. 331 332# Compose UI API structure 333 334Compose UI is a UI toolkit built on the Compose runtime. This section outlines guidelines for APIs that use and extend the Compose UI toolkit. 335 336## Compose UI elements 337 338A `@Composable` function that emits exactly one Compose UI tree node is called an _element_. 339 340Example: 341 342```kotlin 343@Composable 344fun SimpleLabel( 345 text: String, 346 modifier: Modifier = Modifier 347) { 348``` 349 350**Jetpack Compose framework development and Library development** MUST follow all guidelines in this section. 351 352**Jetpack Compose app development** SHOULD follow all guidelines in this section. 353 354### Elements return Unit 355 356Elements MUST emit their root UI node either directly by calling emit() or by calling another Compose UI element function. They MUST NOT return a value. All behavior of the element not available from the state of the composition MUST be provided by parameters passed to the element function. 357 358#### Why? 359 360Elements are declarative entities in a Compose UI composition. Their presence or absence in the composition determines whether they appear in the resulting UI. Returning a value is not necessary; any means of controlling the emitted element should be provided as a parameter to the element function, not returned by calling the element function. See the, "hoisted state" section in the Compose API design patterns section of this document for more information. 361 362#### Do 363 364```kotlin 365@Composable 366fun FancyButton( 367 text: String, 368 onClick: () -> Unit, 369 modifier: Modifier = Modifier 370) { 371``` 372 373#### Don't 374 375```kotlin 376interface ButtonState { 377 val clicks: Flow<ClickEvent> 378 val measuredSize: Size 379} 380 381@Composable 382fun FancyButton( 383 text: String, 384 modifier: Modifier = Modifier 385): ButtonState { 386``` 387 388### Elements accept and respect a Modifier parameter 389 390Element functions MUST accept a parameter of type `Modifier`. This parameter MUST be named "`modifier`" and MUST appear as the first optional parameter in the element function's parameter list. Element functions MUST NOT accept multiple `Modifier` parameters. 391 392If the element function's content has a natural minimum size - that is, if it would ever measure with a non-zero size given constraints of minWidth and minHeight of zero - the default value of the `modifier` parameter MUST be `Modifier` - the `Modifier` type's `companion object` that represents the empty `Modifier`. Element functions without a measurable content size (e.g. Canvas, which draws arbitrary user content in the size available) MAY require the `modifier` parameter and omit the default value. 393 394Element functions MUST provide their modifier parameter to the Compose UI node they emit by passing it to the root element function they call. If the element function directly emits a Compose UI layout node, the modifier MUST be provided to the node. 395 396Element functions MAY concatenate additional modifiers to the **end** of the received `modifier` parameter before passing the concatenated modifier chain to the Compose UI node they emit. 397 398Element functions MUST NOT concatenate additional modifiers to the **beginning** of the received modifier parameter before passing the concatenated modifier chain to the Compose UI node they emit. 399 400#### Why? 401 402Modifiers are the standard means of adding external behavior to an element in Compose UI and allow common behavior to be factored out of individual or base element API surfaces. This allows element APIs to be smaller and more focused, as modifiers are used to decorate those elements with standard behavior. 403 404An element function that does not accept a modifier in this standard way does not permit this decoration and motivates consuming code to wrap a call to the element function in an additional Compose UI layout such that the desired modifier can be applied to the wrapper layout instead. This does not prevent the developer behavior of modifying the element, and forces them to write more inefficient UI code with a deeper tree structure to achieve their desired result. 405 406Modifiers occupy the first optional parameter slot to set a consistent expectation for developers that they can always provide a modifier as the final positional parameter to an element call for any given element's common case. 407 408See the Compose UI modifiers section below for more details. 409 410#### Do 411 412```kotlin 413@Composable 414fun FancyButton( 415 text: String, 416 onClick: () -> Unit, 417 modifier: Modifier = Modifier 418) = Text( 419 text = text, 420 modifier = modifier.surface(elevation = 4.dp) 421 .clickable(onClick) 422 .padding(horizontal = 32.dp, vertical = 16.dp) 423) 424``` 425 426## Compose UI layouts 427 428A Compose UI element that accepts one or more `@Composable` function parameters is called a _layout_. 429 430Example: 431 432```kotlin 433@Composable 434fun SimpleRow( 435 modifier: Modifier = Modifier, 436 content: @Composable () -> Unit 437) { 438``` 439 440**Jetpack Compose framework development and Library development** MUST follow all guidelines in this section. 441 442**Jetpack Compose app development** SHOULD follow all guidelines in this section. 443 444Layout functions SHOULD use the name "`content`" for a `@Composable` function parameter if they accept only one `@Composable` function parameter. 445 446Layout functions SHOULD use the name "`content`" for their primary or most common `@Composable` function parameter if they accept more than one `@Composable` function parameter. 447 448Layout functions SHOULD place their primary or most common `@Composable` function parameter in the last parameter position to permit the use of Kotlin's trailing lambda syntax for that parameter. 449 450## Compose UI modifiers 451 452A `Modifier` is an immutable, ordered collection of objects that implement the `Modifier.Element` interface. Modifiers are universal decorators for Compose UI elements that may be used to implement and add cross-cutting behavior to elements in an opaque and encapsulated manner. Examples of modifiers include altering element sizing and padding, drawing content beneath or overlapping the element, or listening to touch events within the UI element's bounding box. 453 454**Jetpack Compose framework development and Library development** MUST follow all guidelines in this section. 455 456### Modifier factory functions 457 458Modifier chains are constructed using a fluent builder syntax expressed as Kotlin extension functions that act as factories. 459 460Example: 461 462```kotlin 463Modifier.preferredSize(50.dp) 464 .backgroundColor(Color.Blue) 465 .padding(10.dp) 466``` 467 468Modifier APIs MUST NOT expose their Modifier.Element interface implementation types. 469 470Modifier APIs MUST be exposed as factory functions following this style: 471 472```kotlin 473fun Modifier.myModifier( 474 param1: ..., 475 paramN: ... 476): Modifier = then(MyModifierImpl(param1, ... paramN)) 477``` 478 479### Layout-scoped modifiers 480 481Android's View system has the concept of LayoutParams - a type of object stored opaquely with a ViewGroup's child view that provides layout instructions specific to the ViewGroup that will measure and position it. 482 483Compose UI modifiers afford a related pattern using `ParentDataModifier` and receiver scope objects for layout content functions: 484 485#### Example 486 487```kotlin 488@Stable 489interface WeightScope { 490 fun Modifier.weight(weight: Float): Modifier 491} 492 493@Composable 494fun WeightedRow( 495 modifier: Modifier = Modifier, 496 content: @Composable WeightScope.() -> Unit 497) { 498// ... 499 500// Usage: 501WeightedRow { 502 Text("Hello", Modifier.weight(1f)) 503 Text("World", Modifier.weight(2f)) 504} 505``` 506 507**Jetpack Compose framework development and library development** SHOULD use scoped modifier factory functions to provide parent data modifiers specific to a parent layout composable. 508 509# Compose API design patterns 510 511This section outlines patterns for addressing common use cases when designing a Jetpack Compose API. 512 513## Prefer stateless and controlled @Composable functions 514 515In this context, "stateless" refers to `@Composable` functions that retain no state of their own, but instead accept external state parameters that are owned and provided by the caller. "Controlled" refers to the idea that the caller has full control over the state provided to the composable. 516 517### Do 518 519```kotlin 520@Composable 521fun Checkbox( 522 isChecked: Boolean, 523 onToggle: () -> Unit 524) { 525// ... 526 527// Usage: (caller mutates optIn and owns the source of truth) 528Checkbox( 529 myState.optIn, 530 onToggle = { myState.optIn = !myState.optIn } 531) 532``` 533 534### Don't 535 536```kotlin 537@Composable 538fun Checkbox( 539 initialValue: Boolean, 540 onChecked: (Boolean) -> Unit 541) { 542 var checkedState by remember { mutableStateOf(initialValue) } 543// ... 544 545// Usage: (Checkbox owns the checked state, caller notified of changes) 546// Caller cannot easily implement a validation policy. 547Checkbox(false, onToggled = { callerCheckedState = it }) 548``` 549 550## Separate state and events 551 552Compose's `mutableStateOf()` value holders are observable through the `Snapshot` system and can notify observers of changes. This is the primary mechanism for requesting recomposition, relayout, or redraw of a Compose UI. Working effectively with observable state requires acknowledging the distinction between _state_ and _events_. 553 554An observable _event_ happens at a point in time and is discarded. All registered observers at the time the event occurred are notified. All individual events in a stream are assumed to be relevant and may build on one another; repeated equal events have meaning and therefore a registered observer must observe all events without skipping. 555 556Observable _state_ raises change _events_ when the state changes from one value to a new, unequal value. State change events are _conflated;_ only the most recent state matters. Observers of state changes must therefore be _idempotent;_ given the same state value the observer should produce the same result. It is valid for a state observer to both skip intermediate states as well as run multiple times for the same state and the result should be the same. 557 558Compose operates on _state_ as input, not _events_. Composable functions are _state observers_ where both the function parameters and any `mutableStateOf()` value holders that are read during execution are inputs. 559 560## Hoisted state types 561 562A pattern of stateless parameters and multiple event callback parameters will eventually reach a point of scale where it becomes unwieldy. As a composable function's parameter list grows it may become appropriate to factor a collection of state and callbacks into an interface, allowing a caller to provide a cohesive policy object as a unit. 563 564### Before 565 566```kotlin 567@Composable 568fun VerticalScroller( 569 scrollPosition: Int, 570 scrollRange: Int, 571 onScrollPositionChange: (Int) -> Unit, 572 onScrollRangeChange: (Int) -> Unit 573) { 574``` 575 576### After 577 578```kotlin 579@Stable 580interface VerticalScrollerState { 581 var scrollPosition: Int 582 var scrollRange: Int 583} 584 585@Composable 586fun VerticalScroller( 587 verticalScrollerState: VerticalScrollerState 588) { 589``` 590 591In the example above, an implementation of `VerticalScrollerState` is able to use custom get/set behaviors of the related `var` properties to apply policy or delegate storage of the state itself elsewhere. 592 593**Jetpack Compose framework and Library development** SHOULD declare hoisted state types for collecting and grouping interrelated policy. The VerticalScrollerState example above illustrates such a dependency between the scrollPosition and scrollRange properties; to maintain internal consistency such a state object should clamp scrollPosition into the valid range during set attempts. (Or otherwise report an error.) These properties should be grouped as handling their consistency involves handling all of them together. 594 595**Jetpack Compose framework and Library development** SHOULD declare hoisted state types as `@Stable` and correctly implement the `@Stable` contract. 596 597**Jetpack Compose framework and Library development** SHOULD name hoisted state types that are specific to a given composable function as the composable function's name suffixed by, "`State`". 598 599## Default policies through hoisted state objects 600 601Custom implementations or even external ownership of these policy objects are often not required. By using Kotlin's default arguments, Compose's `remember {}` API, and the Kotlin "extension constructor" pattern, an API can provide a default state handling policy for simple usage while permitting more sophisticated usage when desired. 602 603### Example: 604 605```kotlin 606fun VerticalScrollerState(): VerticalScrollerState = 607 VerticalScrollerStateImpl() 608 609private class VerticalScrollerStateImpl( 610 scrollPosition: Int = 0, 611 scrollRange: Int = 0 612) : VerticalScrollerState { 613 private var _scrollPosition by 614 mutableStateOf(scrollPosition, structuralEqualityPolicy()) 615 616 override var scrollPosition: Int 617 get() = _scrollPosition 618 set(value) { 619 _scrollPosition = value.coerceIn(0, scrollRange) 620 } 621 622 private var _scrollRange by 623 mutableStateOf(scrollRange, structuralEqualityPolicy()) 624 625 override var scrollRange: Int 626 get() = _scrollRange 627 set(value) { 628 require(value >= 0) { "$value must be > 0" } 629 _scrollRange = value 630 scrollPosition = scrollPosition 631 } 632} 633 634@Composable 635fun VerticalScroller( 636 verticalScrollerState: VerticalScrollerState = 637 remember { VerticalScrollerState() } 638) { 639``` 640 641**Jetpack Compose framework and Library development** SHOULD declare hoisted state types as interfaces instead of abstract or open classes if they are not declared as final classes. 642 643When designing an open or abstract class to be properly extensible for these use cases it is easy to create hidden requirements of state synchronization for internal consistency that are difficult (or impossible) for an extending developer to preserve. Using an interface that can be freely implemented strongly discourages private contracts between composable functions and hoisted state objects by way of Kotlin internal-scoped properties or functionality. 644 645**Jetpack Compose framework and Library development** SHOULD provide default state implementations remembered as default arguments. State objects MAY be required parameters if the composable cannot function if the state object is not configured by the caller. 646 647**Jetpack Compose framework and Library development** MUST NOT use `null` as a sentinel indicating that the composable function should internally `remember {}` its own state. This can create accidental inconsistent or unexpected behavior if `null` has a meaningful interpretation for the caller and is provided to the composable function by mistake. 648 649### Do 650 651```kotlin 652@Composable 653fun VerticalScroller( 654 verticalScrollerState: VerticalScrollerState = 655 remember { VerticalScrollerState() } 656) { 657``` 658 659### Don't 660 661```kotlin 662// Null as a default can cause unexpected behavior if the input parameter 663// changes between null and non-null. 664@Composable 665fun VerticalScroller( 666 verticalScrollerState: VerticalScrollerState? = null 667) { 668 val realState = verticalScrollerState ?: 669 remember { VerticalScrollerState() } 670``` 671 672## Extensibility of hoisted state types 673 674Hoisted state types often implement policy and validation that impact behavior for a composable function that accepts it. Concrete and especially final hoisted state types imply containment and ownership of the source of truth that the state object appeals to. 675 676In extreme cases this can defeat the benefits of reactive UI API designs by creating multiple sources of truth, necessitating app code to synchronize data across multiple objects. Consider the following: 677 678```kotlin 679// Defined by another team or library 680data class PersonData(val name: String, val avatarUrl: String) 681 682class FooState { 683 val currentPersonData: PersonData 684 685 fun setPersonName(name: String) 686 fun setPersonAvatarUrl(url: String) 687} 688 689// Defined by the UI layer, by yet another team 690class BarState { 691 var name: String 692 var avatarUrl: String 693} 694 695@Composable 696fun Bar(barState: BarState) { 697``` 698 699These APIs are difficult to use together because both the FooState and BarState classes want to be the source of truth for the data they represent. It is often the case that different teams, libraries, or modules do not have the option of agreeing on a single unified type for data that must be shared across systems. These designs combine to form a requirement for potentially error-prone data syncing on the part of the app developer. 700 701A more flexible approach defines both of these hoisted state types as interfaces, permitting the integrating developer to define one in terms of the other, or both in terms of a third type, preserving single source of truth in their system's state management: 702 703```kotlin 704@Stable 705interface FooState { 706 val currentPersonData: PersonData 707 708 fun setPersonName(name: String) 709 fun setPersonAvatarUrl(url: String) 710} 711 712@Stable 713interface BarState { 714 var name: String 715 var avatarUrl: String 716} 717 718class MyState( 719 name: String, 720 avatarUrl: String 721) : FooState, BarState { 722 override var name by mutableStateOf(name) 723 override var avatarUrl by mutableStateOf(avatarUrl) 724 725 override val currentPersonData: PersonData 726 get() = PersonData(name, avatarUrl) 727 728 override fun setPersonName(name: String) { 729 this.name = name 730 } 731 732 override fun setPersonAvatarUrl(url: String) { 733 this.avatarUrl = url 734 } 735} 736``` 737 738**Jetpack Compose framework and Library development** SHOULD declare hoisted state types as interfaces to permit custom implementations. If additional standard policy enforcement is necessary, consider an abstract class. 739 740**Jetpack Compose framework and Library development** SHOULD offer a factory function for a default implementation of hoisted state types sharing the same name as the type. This preserves the same simple API for consumers as a concrete type. Example: 741 742```kotlin 743@Stable 744interface FooState { 745 // ... 746} 747 748fun FooState(): FooState = FooStateImpl(...) 749 750private class FooStateImpl(...) : FooState { 751 // ... 752} 753 754// Usage 755val state = remember { FooState() } 756``` 757 758**App development** SHOULD prefer simpler concrete types until the abstraction provided by an interface proves necessary. When it does, adding a factory function for a default implementation as outlined above is a source-compatible change that does not require refactoring of usage sites. 759 760