Kindly can you share some insights on how you handle folder structure in app/models folder?

[mrshahzeb7]

I am starting this discussion just to understand how you handle global state at Infinite Red.

Do you create models for every screen or module wise?

1. app/models (these are folders which include screen1.ts and screen1.test.ts)
   screen1
   screen2

2. app/models
   screen1.ts
   screen1.test.ts
   screen2.ts
   screen2.test.ts

3. app/models
   user (folder)
   payment
   marketPlace

I am asking because I am working on a product that is huge and complex! Currently, I've made sure that no file exceeds 150 lines of code for better performance.

However, when I think about how I will create its models, it confuses me because I am ending up with a lot of subfolders (nested).

Could you kindly share any insights, by keeping in mind there will be almost 100 screens?

Thankyou

[jamonholmgren]

Generally speaking, our team does option 3, even in very large apps. It holds up well.

All the store models attached to the root store got a top level folder. Then smaller models that are attached to the store models were put in the folders that they were related with. If a model is attached to multiple stores, then it gets another top level folder like utils

We get pretty nested, with a top level store folder that should probably be called state or something, and then individual "stores" which are usually intended to be singleton parts of the tree, and then nested models that usually represent sub-objects

global models/state. abstracted local state - probably co-locate with screens.

[jamonholmgren]

One thing to note is that limiting files to no more than 150 may have other benefits, but it won't help with performance, as they all get concatenated/bundled into a single file in the end anyway (either Hermes bytecode or a JS bundle).

[mrshahzeb7]

Thank you @jamonholmgren for your answer. Then I think it's 'imposter syndrome.'

It helps with performance in a way that when we limit files to a certain number of lines, now we have to make small components. When we change the state in any component, only that part renders which needs to be rendered.

There is not even a single useCallback and useMemo in my app because now it's not needed, and check out the performance in the video.

It helps avoid unnecessary renders, which results in better performance.

It's a debug build!
https://github.com/infinitered/ignite/assets/69900372/43eecb7f-03c6-43cb-9b60-857508cd9bea