❌ Conditional rendering loses form state in React. ✅ React 19's Activity API preserves it. e.g. Switch between steps → your data stays. Effects cleanup automatically → no wasted resources.

Ah thats nice. No longer need to wrap values in context or in parent

@indiegraas Exactly! :100

Naming this activity makes absolutely no sense does it 😆

Exactly, losing form state with conditional rendering is such a pain. Activity API feels like a game-changer for building multi-step forms cleanly.

Agree! so much easier and cleaner approach.

This is really good and onboarding on apps would be much simpler now with this structure

Looks like a powerful feature in React 19. On my current project I use RHF, but no multi-step forms yet. Guess I’ll see how I handle those (no React19 on the project) 😢

actually RHF doesn't use refs instead of state? this shouldn't be a problem then

RHF uses uncontrolled components under the hood and tracks values via refs. Was curious how to handle the multistep forms. Turns out it’s pretty straightforward - one useForm instance at the top level(keeps data even when steps unmount) - FormProvider to share the form instance using React Context - useFormContext in each form step to read the form instance

Oh cool! Pretty straight forward then.

Love the video

Thanks Austin!

Ever heard of this thing called #EmberJS?

damn I used to work with Ember JS back in the day!

Come back!

nice alternative to using context but not super valuable for more complex forms where you are going to need context anyway imo

This is epic, what software do you use to make these videos?

hey! I use remotion for these

Another approch is to use switch case

the number of times i've jury-rigged useRef to hold form state between steps just to avoid this exact problem. Activity API feels like an apology letter from the React team

what version it available and how do you import it?

This is a mental illness I swear to god

Why?

That is why we use context providers, or store keep context

Wow big improvements

Looks cool, more memory tho no? Kinda useless if u hoist the state up and use something like zustand.

I hadn’t considered this, this is very relevant to my interests Thanks man

Glad you found it useful!

Activity API is magic for state preservation! Using it in React forms for chem lab inputs (no data loss on switches). Cleanup is clutch for perf in data-heavy UIs. #React19

Have you updated your React infographics with the new features? If yes, it would be a great moment for me to update 😅

This would be great for an onboarding panel like the one I vibe coded with Claude and Gemini

exactly, love the design btw!

thank you!

If you use some form library like react-hook-form then this problem shouldn’t occur, but nice idea if you want to use just the build in react features

because it uses refs right? not state.

Tbh I don’t know the exact implementation in the react-hook-form code but wrapping this conditional rendering on one level up in the component hierarchy with <FormProvider> is enough since then only its content changes and <FormProvider> doesn’t, which lets you save input value

What's activity doing here that CSS dosen't do?

Clean up

What is there to clean up?

@_georgemoller Effects

@_georgemoller Why not just not unmount?

@_georgemoller What do you mean? useUnmount() ?

@_georgemoller No, i mean, why clean up at all? Just don't unrender the component. Hide it with CSS. If there is a need to go back to the component, why complicate things with more js? (Activity)

isnt it adding more complex code structure?

That' s great I am really going to use it

thats pretty cool, didnt know react 19 had that feature

Another stupid unnecessary hook/API