I’m creating a client-side only mockup of a gym-class management system. I have a models folder with javascript dummy user objects that will provide default user credentials and info. However, I want users to log in (using dummy credentials) and then be able to play around with the functionality by editing personal info, scheduling classes, etc. I do want persistent data across different sessions so im using localStorage as the “database”. The project is very small so I wasn’t concerned about the storage size limits. Right now, I have programmed it so that logging in sets both the global authorized user state and sets the localStorage with the user object and all of its properties.

• When it comes to the actual functionality (such as editing profiles or something), I’m lost on whether I should:

=> alter localStorage => then have a useEffect that syncs state with storage changes
OR
=> alter state => then have a useEffect that syncs storage with state changes
OR
=> just update both?

For example, I have a widget component that would track to-dos for admin users. In the user object, i have a nested todos array. So far I’ve programmed it so that when the admin CRUD operates on the todo widget, it updates the user.todos property in both authState and localStorage user object. i’m currently just wondering whether there is a “best practice” for these kind of client-side-only mockups.