react-lite | React v15.x that optimizes for small script size | Frontend Utils library

I always have to restart the dev server for displaying changes that I made in my mobx store class, for example logging values into console, which is not really developer friendly. I am open for any kind of solution that could impact the hot-reload behaviour when changing the Store.ts code. Here is my implementation for nextJs.

_app.tsx

I'm new to Mobx and I can't work out how to compute a value in my store.

I'm following the docs description of using the 'computed' modifier.

Here's my (cut down) appState:

I have been trying to use mobX to apply on React Native Functional Component. So I use these 2 libraries - mobx & mobx-react-lite.

I made a simple counter app and I also useContext hook along with this. After increasing the value, it doesn't apply on the screen. However, it appeared on my console. The change got displayed on after I had refreshed my code by saving it (I didn't change the code)

How do I solve this issue?

App.js

I have a component:

I just started to practice react mobx and now I have a problem. the observer not working. it seems it not observing the store. this should load some activity list from api and during loading show the icon (loading). and after loaded datas it should show the activities in boxes. it loads correctly from api and I can see in network inspect tabs. the problem is exactly in observer . here is my activityStore:

I am trying to display loading indicator on top of the form (to overlay it) but having a hard time to do so...

I want to show loading indicator when trash / minus or plus is clicked. I am using React.js + MobX. I do have a boolean flag, but what is difficult to achieve to actually place the loading indicator on top of the form (without corrupting the styling...)

Source code of cart:

I can understand how TodoListView receives { todoList } in its observer because its props is being referenced by

In TodoListView why can't I replace { todoList } with props.todoList and replace the following instances of todoList with props.todoList to achieve the same result?

I can't make React re-render with MobX. I'm setting up everything as per the documentation. My class contains action and observable decorators. I tried hooking up the React component with useObserver hook or observer HOC and it simply won't re-render.

Snippet: