Stack screen flow in React PWA

I have similar functionality for my app. I will go over both ways.

- Perferred

I think this is the best way to go about it. You'd control the screens based on state. If you were to combine this with something like Formik where you can easily handle forms & validation, it becomes a really simple process which ensures you don't have to handle things like sending the state forwards and backwards between multiple pages. It also allows you to send only 1 request with all the data and reduces the complexity for the backend as you wont have to handle some parts of the activity being undefined. The only downside to this is the state being lost if the page is reloaded.

- Not preferred

If you go with a multi screen design you'll have to handle passing the state along to the next screen and submit it at the final step. Passing the state from one screen to another is not a bad idea, however, if you have like 3 or 4 screens you'll have to create the logic to handle passing the state back to the previous screens if a user decides to go back to a previous page. Submitting the data after each screen is not a good idea because then you'd have to create lots of additional backend logic to handle some fields being empty if a user exits on the second screen for example.

Hope this provides some clarification.