Difference between remember and rememberUpdatedState in Jetpack Compose?

The difference between remember and rememberUpdatedStates are:

remember

Remember the value produced by calculation. calculation will only be evaluated during the composition. Recomposition will always return the value produced by composition.

When you use remember, every consecutive calls to recomposition will only return same value that was computed initially during first call to remember. You can consider this as an read-only state that you can not update on future reference while recomputing will reference to initial evaluation.

rememberUpdatedStates

remember a mutableStateOf and update its value to newValue on each recomposition of the rememberUpdatedState call.

rememberUpdatedState should be used when parameters or values computed during composition are referenced by a long-lived lambda or object expression. Recomposition will update the resulting State without recreating the long-lived lambda or object, allowing that object to persist without cancelling and resubscribing, or relaunching a long-lived operation that may be expensive or prohibitive to recreate and restart.

Here, it is expected that sometimes your calculation can take a while and computation may be considerable slow. In such cases, you're provided with latest value rather than lambda that will take impact on every recomposition so that you can have reference to the latest value produced by calculation.

By using this method, you make sure that your UI is updated by every recomposition without recreating long-lived lambdas or relaunching long-lived operations that you may have during remember method's lambda callbacks.

remember is needed when you don't want to do some heavy calculation/opearation when your composable is recomposed on the other hand sometimes your operation might change so you need to do calculation or update remembered value to be not able to use obsolete value from initial calculation.

fun <T> rememberUpdatedState(newValue: T): State<T> = remember {
    mutableStateOf(newValue)
}.apply { value = newValue }

rememberUpdatedState function is same as using remember with mutableState to trigger recomposition when value changes.

@Composable
private fun Calculation(input: Int) {
    val rememberUpdatedStateInput by rememberUpdatedState(input)
    val rememberedInput = remember { input }

    Text("updatedInput: $rememberUpdatedStateInput, rememberedInput: $rememberedInput")
}

var myInput by remember {
    mutableStateOf(0)
}

OutlinedButton(
    onClick = {
        myInput++

    }
) {
    Text("Increase $myInput")
}
Calculation(input = myInput)

This is a very basic example to show how values from remember and rememberUpdatedState change

More practical example is with lambdas

For example, suppose your app has a LandingScreen that disappears after some time. Even if LandingScreen is recomposed, the effect that waits for some time and notifies that the time passed shouldn't be restarted:

@Composable
fun LandingScreen(onTimeout: () -> Unit) {

    // This will always refer to the latest onTimeout function that
    // LandingScreen was recomposed with
    val currentOnTimeout by rememberUpdatedState(onTimeout)

    // Create an effect that matches the lifecycle of LandingScreen.
    // If LandingScreen recomposes, the delay shouldn't start again.
    LaunchedEffect(true) {
        delay(SplashWaitTimeMillis)
        currentOnTimeout()
    }

    /* Landing screen content */
}

In this example LaunchedEffect is invoked once but this LandingScreen function can be recomposed and might require you to change onTimeOut, so using rememberUpdatedState makes sure that the latest onTimeout is called after delay.