Stack screen flow in React PWA

adammartiska 0
Viewed 24

I am creating PWA application that will be downloaded into users phones (primarily used as downloaded version). I am wondering if I am creating some multi-step screens content (in our example creating some activity: 1. step: - adding name , 2. step - adding time, ...) what is the best way to handle it from React side? Is it better to navigate via router between each step or simply just control the screens based on the state.

I can see pros and cons in both approaches for example using router:

  • when user enters route into web browser for step number 3 that he won't be allowed to enter yet - what to do?
  • immune to refresh because refresh is based on the current route so content remains the same

For state :

  • when user refreshes the screen he will loose all the data (which is expected in SPA) and is redirected on the beginning of this flow

I also think this is strongly dependent on how the backend is designed (if the data is passed for every step or if only final merged data is send to backend)

progressive-web-apps reactjs javascript
1 Answers

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

1. Controlling screens based on state - 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.

2. Multi screen process - 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.

user8PoT0
Related