Rendering an array

[ndrean]

Hi! I guess my use case has been battle-tested. I only use functional React components, no class. The documentation is heavily "class orientated" so I did not find an answer.

I have a problem rendering within a component an array of objects fetched against an external API.

My question is: can I only perform a Mobx state update outside of a component?

For example, If I want to reach for a page that renders an array. I can update the Mobx state before rendering, this seems to work (code "index.js"). But suppose that within a page, I may need a Mobx state update, (via a button or websockets), so I want to update the Mbox state that is used within a component. However, there is no rendering (see code for Users).
How can I do this? My codesandbox is here

My Mobx store. Proxying the Mobx state update function fetchMbxUsers with action`.

// myStore.js
export const myStore = observable({
  users: null,
  fetchMbxUsers: action( async () => {
    const response = await fetchUsers();
    myStore.users = response
  })
});

// MbxUser.js
export default observer(({user}) => <p>{user.email}</p>)

My "Users" component fetches the data from an external API to render it line by line.
If I update the state by running runInActionwithin the component, nothing is rendered

// MbxUsers.js
const LazyUser = lazy(()=> import("./User"))

// this component only renders if the Mobx state is run outside, so when the 2 first lines are removed
export default observer(({ store }) => {
  runInAction(() => store.fetchMbxUsers())
  .then(() => {
    console.log("store.users") );  
    //<-- state is indeed updated but nothing is returned
    return (
    <>
      {store.users &&
          store.users.map((user) => (
          // <- each "user' is indeed present
            <>
              <LazyUser key={user.email.toString()} user={user} />
            </>
          ))
        }
    </>
  );
});

If I update the state outside of a component before rendering, it works.

// index.js
import {myStore} from "./store"
const LazyUsers = lazy(()=> import("./Users"))

runInAction(()=> myStore.fetchMbxUsers()).then(()=>
root.render(
  <StrictMode>
    <App>
      <LazyUsers store={myStore}/>
    </App>
  </StrictMode>
);

However, this is like navigating to a new page. How could I render a component without calling the update function outside of it?

[urugator]

It seems to me that you're lacking some basics of how react works (and perhaps promises). I would suggest to get familiar with these first and introduce mobx later.
If you want to perform an async work (like fetching users) when a component "appears" or "updates", take a look at
https://reactjs.org/docs/hooks-effect.html

[urugator]

especially as the doc seems directed to class-style components

Examples in https://mobx.js.org/react-integration.html use mobx-react-lite which doesn't even support class components so I am not sure what you're talking about.

export default observer(({ store }) => {
  useEffect(() => {
    store.fetchMbxUsers()
  }, [store]);

  return (
    <>
      {store.users &&
          store.users.map((user) => (
            <>
              <User key={user.email.toString()} user={user} />
            </>
          ))
        }
    </>
});

Alternatively you can fetch users in some navigate action, which you will call eg when user clicks some nav button.

Note React.lazy has nothing to do with fetching data, it allows to load the component's source code lazily.

[ndrean]

But doing this, I was still using useEffect, and furthermore, I had the warning

"Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: ObservableObject@1.users "

so I believed this was not correct.

And yes, a "navigate" would use a "runInAction" before the render call as exposed I imagine?

Anyway, thank you for your help

[urugator]

fetchMbxUsers: async () => {
  const response = await fetchUsers();
  runInAction(() => {
     myStore.users = response
  })  
}

or

fetchMbxUsers: flow(function*() {
  const response = yield fetchUsers();
  myStore.users = response  
})

or

export const myStore = observable({
  users: null,
  *fetchMbxUsers() {
    const response = yield fetchUsers();
    myStore.users = response
  })
});

[urugator]

export const myStore = observable({
  users: null,
  pageId: 'home',
  *fetchMbxUsers() {
    const response = yield fetchUsers();
    myStore.users = response
  })
  navigate(pageId) {
     myStore.pageId = pageId;
     if (pageId === 'userList') {
        myStore.fetchMbxUsers();
     }
  }
});

[ndrean]

Ok, you don't proxy the async fetch with action but make it autorun instead, or use generators. Thank you. This kind of basic example is now in the docs, great!