Hi wonder if someone could tell if the following could work or not

Wait

Why do you introduce another atom in the inner component? Don't do that

Just use model directly

Deref the ratom in all components you want to update when state changes

Don't pass the atom around, just use the global variable directly

@rui.yang: ^^

@pesterhazy it's for performance reason. in re-frame, i only want to mutate app state when user finishes input, which is on blur.

looking at the re-com link in my snippet, i thought using the internal atom could work

Usually performance doing be going directly updating state with every onchange event

But if not, why don't you use the onblur event?

basically on change will mutate internal atom, and on blur mutate app state

You can use a callback ref to get at the input value

on blur didnt work for me

basically the input wont respond to user typing if i do on blur

Have you tried using default-value instead of value?

Look up controlled components on the react docs

@pesterhazy sorry, I actually don’t have much knowledge about the stuff you talked. Haven’t used react in an angle. I am using re-frame, not purely reagent. not sure if that’s the reason or not 😞 all I want is to maintain internal state for input and dispatch updating app-db on blur. If I do updating app-db on change, desktop is ok, but browser in mobile is slow.

the user experience is not great on mobile.

Sure. I think it's mostly a react problem.. Re-frame doesn't actually change things compared to reagent

Remember that if the react elements remain the same after an update, the dom isn't touched

So unless pure js calculation is the problem, you should be fine with frequent state updates

Make sure to read this: https://facebook.github.io/react/docs/forms.html

@rui.yang i was answering this in the #re-frame channel - probably better not to cross-post in the future

the initial issue has to do with not using reaction, you’re setting the value of the internal m atom one time in main-page - it doesn’t change based on swap!ing model

and the code example does trigger a React warning in the DevTools console regarding value vs defaultValue as @pesterhazy points out