useObserver reactivity - question

[mks11]

Sorry, but if you have unrelated questions, these are better asked in separate issue with appropriate details.

My question wasn't unrelated. The title of this issue was exactly what I googled for. While I was trying to resolve the exact same issue, I asked the very related question.

Originally posted by @FredyC in https://github.com/mobxjs/mobx-react-lite/issues/261#issuecomment-657669855

[danielkcz]

Please elaborate more on your question in detail.

[mweststrate]

@mks please use observer as recommended in the docs instead of useObserver.

For any further help, please provide a runable reproduction in code sandbox so that we have something to talk about. If your issue would be the same, there was no reason to ask your question in the first place as the same solutions would apply.

Also, please update your issue title as this one is unusable for others.

[mks11]

Thanks! I was able to bring back the reactivity inside useObserver by creating a new object from the observables from my store, ie. something like

useObserver(() => {
    return {
          items : [...someObservableItemsInMyStore],
          errors : {... someObservableKeyValuePairInMyStore}
     }
})

[mweststrate]

As said I'd recommend against doing that, since

1) you are now cloning data structures unnecessarily 2) this still wont detect changes inside objects inside these data structures.

I recommend in general to use observer instead of useObserver to avoid any confusion and unnecessary penalties.

[mks11]

Thank you!

[mks11]

I think you are referring to this part of the doc, "In this case, you can omit the wrapping observer, but you need to be sure there is no other observable present in the component." https://mobx-react.js.org/recipes-migration I for some reason thought "the component" here was where it was being finally used and not the custom hook itself.

Let me know if you want me to add an example in doc here to make it more clear.

[danielkcz]

@mks11 Docs are going through a lot of changes for the upcoming V6. You can see the current version at https://deploy-preview-2327--mobx-docs.netlify.app/. Submitting PR for "old" docs would be counterproductive right now.

[mks11]

@FredyC great! thanks!

[FreeClimb]

I support the idea of observables since the knockout and mvvm template. Аnd now in a large project I tried to use mobx-react-lite with Ant Design as widgets. I have the same problem, the Table component is not updated after any changes in the dataSource. I tried changing useObservable to observable, but the problem persists. Here is my example on codesandbox:

Ant Design Table with CRUD in Modal form

I would appreciate any help that I am doing wrong. thank

[FreeClimb]

I used the last mobx 6.0.0-rc and mobx-react-lite 3.0.0-rc version but Table not rendering after add or modify item;