https://kotlinlang.org logo
Join Slack
Powered by
Do we have to place `mutableStateOf` always inside...
# compose
m
Do we have to place 
mutableStateOf
always inside of 
remember
? It is not clear to me what is 
remember
doing 🤔
j
5 and 6
m
After reading this I'm still a little bit confused. I'll read it again more slowly
But do you know what is the equivalent for this construct in React?
Coming from 2017's React and little knowledge of React Hooks my understanding is that you would only need mutableStateOf
s
The important part here is that whole composable function is kinda like render in react, so it is re-evaluated every time some value has changed. That's why you would want remember, it will keep the value between those re-evaluations, so your state won't be lost.
You can imagine it as keeping the state outside of function (like a field in react component class), but you don't have to manage the instance of this component, you are just `remember`ing things
j
I have no idea about react, sorry
m
So mutableStateOf should always be inside remember?
p
if you don't put it inside of a remember, you would be creating the MutableState on every composition
đź‘Ť 2
m
Probably this has to do with the fact that Composable functions return Unit instead of being pure like in React right?
p
how so?
s
Being pure is the whole another topic I think. Hooks in react (useEffect and useState) are much closer to what remember is and they have quite similar reasoning behind them as well.
m
If composable functions were part of a class and they would return immutable copies of that class, you don't need to remember the state because you already have it as a field in the class
p
so... you're saying they're pure, which seems to contradict your question
m
I'm saying if they were
🙌 1
p
m
I think that I have some conflicts with this mental model coming from pure functional programming but I get it
Thanks for the resources guys đź‘Ť
đź‘Ť 1
l
I talk about remember (and the fact that composable functions have a “memory”, which is what remember addresses) in my talk in a few places:

hereâ–ľ

and

hereâ–ľ

the equivalent in react is 
useMemo
fwiw
useState is equivalent to the 
state
function we used to have, which was simply a convenience method:
Copy code
@composable fun <T> state(init: () -> T) = remember { mutableStateOf(init()) }
if you are creating a state object inside of composition, you likely want to 
remember
it or else when a recomposition happens it will just create a new one instead of using the old one (which is the whole idea behind `remember`… it “remembers” the previous value).
The neat thing about 
mutableStateOf
is that you don’t need to call it in a composable function. If you are creating state somewhere else (say, in the construction of a class), you can create a state object there as well. This creates use cases that are similar to the new React library recoil if you are familiar with that (and also similar to mobx if you are familiar with that)
I also go into a lot of detail about how remember actually works in this talk

hereâ–ľ

If you are familiar with recoil, here is a gist of recoil’s docs examples equivalent in compose: https://gist.github.com/lelandrichardson/4cfbb7aab96e01803cc7b289c2303e45
m
Amazing, thank you đź‘Ť
k
Why state does not remember itself other than remember { state }, we don't wrap state in memo in react 🤔
l
because in react, state is tied to the component itself
in compose it’s just an object
you can call 
mutableStateOf
anywhere
k
So whenever we use the values of state object, composable functions will subscribe to it and whenever values changes it will recompose. Thank you
2 Views
Open in Slack
PreviousNext
Powered by