In my app, I have actions like followUser(), refreshProfile(), editProfile(), uploadPost()...

I also have a global state, which contains the user data (totalFollowing, totalPosts, username, avatar, ...).

I have decided to implement a LRU cache to store users (including the current user), just to avoid unnecessary requests, as the global state of the current user is only available during the current sessions (destroyed when he/she signs out).

So... this cache will allow me to fetch data from memory (memoization pattern) even between different sessions (imagine the current user signs out and signs in again).

The only way to communicate with my server is using the methods implemented in my "api" folder (something typical).

The main problem I am experiencing is that, as in order to avoid awaiting for the server response I am updating the UI before calling it, and in some methods like "followUser" I don't get a response with the current user new "totalFollowing" field... it seems that I am forced to update my in-memory cache in the UI files (I mean, not in the "api" layer) in order to synchronize it with the app stateful data.

Is this an anti-pattern? Should I only update the users "cache" in the "api" layer?

This is my frontend project structure:

/app
   /screens
       -Profile.js <--- Here I am updating the user cache, in order to synchronize it with the UI state
   /components
   /context
   /hooks
   /utils 
   /lib
   /services
      /api
         /users
            /cache
                -usersCache.js

            -followUser.js

The truth is, I had never synchronized a cache before, I don't even know if it is something typical, but it is costing me a lot, since I have all the updates divided between the UI files, and not in the "api" layer.