My experience while creating a scalable and performant React app

1. Create an app with react cli tool, work with standard folder structure

2. No routing and put everything in one JavaScript file (It worked)

3. Right now first screen is created with react hooks but each variable is created using useState, which is ok but sharing state is difficult, I was using state lifting from child component in absence of mechanism on shareable state, which was being unpredictable and causing serious performance issues if not handled properly. But I let it go till now

4. Thinking more from usability, as small screen devices weren't supported properly

5. Design everything in landscape mode, so every user have more screen space to work with

6. After few days, turns out landscape mode is not feasible much for typing

7. Trying to scale to fit everything in portrait mode with less then half width to work with , but now my action buttons on bottom bar are clumsy(Which were ok in landscape mode), so I had to put them in a separate ellipsis

8. Layout wise everything is fine, but I want to do the theming, handling theme with 'useState' hook is quite difficult , so I tried to incorporate more advanced hooks 'A combination of useContext with useReducer'. I am still trying to avoid use of 'redux'

9. Now handling state in child components are much easier, but still it isn't perfect, because by default there is no combinedReducer in react, hence I only have single reducer for complete app, so it is concluded that avoiding redux in large apps is still not advisable.

10. But now I want to add more screens and more fluid screen management, hence I included routing with react navigation, hence I achieved code splitting among routes, but now mechanism to sharing state to be re-written, as working with child routes is different then having child component

11. Now I divided my first screen into smaller components and included them into Main Screen, code looks cleaner now.

12. But now I have a problem of scalability because if I want to add more screens like this, I have to create layouts for them separately, so I decided to create a structure, where I can generate screen using JSONs, so things can be customized without changing the code, but now idea for having smaller components goes for a toss, because now I can generate my screen like I want by changing directly in database.

13. I started creating JSONs but creating a json for a large screen is no easy tasks, so started to create smaller json objects, and then merged them into one by using spread operators.

14. I removed any static stylesheets from code, and added the style props for components directly in json, so they become part of state

15. Now user can customize the styles in run time, as they are part of state and can be updated by user actions

16. In the end I ended up, fully customizable, templating engine, where I don't have to change code or update my app to supply updated screens to user,

17. In the end , I became a more matured developer with a small headache , but also with a happy solution

18. But I will reintroduce redux for now, as I am hoping that App will go larger

:)