I have a React JSX element and the props for has dependency on multiple models . Basically its something like this
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _, { entries } from "lodash";
import { Model1 } from "@/types/model1";
const { id } = useParams();
const { mystores } = useStore();
const mystore = id ? mystores.get(id) : null;
const items: [string, Model1][] = entries(mystore?.model_1?.records);
const recordData = _.chain(items)
.map(([key, model1]) => {
const model2 = mystore?.model_2.records.get(model1.model2_uuid);
const model3 = mystore?.model_3.records.get(model1.model3_uuid);
const model4 = model2 && mystore?.model_4.records.get(model2.model4_uuid);
const model5 =
model3 && mystore?.model5.records.get(model3.model5_uuid);
if (model2 && model3 && model4 && model5) {
return {
model1: model1,
model2: model2,
model3: model3,
model4: model4,
model5: model5
key: key,
};
}
return null;
})
.compact()
.value();
<Box mt={10}>
<MyComponent
myprop={[...recordData.map(({model1,model2,model3,model4,model5}) => toJS({model1,model2,model3,model4,model5}))]}
/>
</Box>
Now in a scenario I am only updating the state of model1 , the MyComponent , myprop is not rendering the updated state (verifying in UI).
But at the same time , if I render only model1 to MyComponent its showing the changes.
import { toJS } from "mobx";
import { observer } from "mobx-react-lite";
import _, { entries } from "lodash";
const { id } = useParams();
const { mystores } = useStore();
const mystore = id ? mystores.get(id) : null;
const items: [string, Model1][] = entries(mystore?.model_1?.records);
<Box mt={10}>
<MyComponent
myprop={[...items.map(([, model1]) => toJS(model1))]}
/>
</Box>
I have added all my JSX.Element as observable.
So basically only passing the model1 as props and moving recordData preparation in MyComponent will fix the issue.
So is it I am loosing the state change event during recordData preparation only.