component not re rendering when call action in mobx - reactjs

Question

I'm using mobx v6.
HomePage calls roomStore.fetchRooms when scrolls down to bottom, yes I use IntersectionObserver and lodash/throttle function for implement infinite scroll.
I checked roomStore.fetchRooms been called when loadMore function called, and roomStore.homeRoomList been updated.
All functions change states in Mobx stores are decorated with #action.
I wonder why my HomePage component is not re-rendered.
//RoomStore
export default class RoomStore extends BasicStore {
#observable homeRoomList: GetRoomsPayload["rooms"] | null;
constructor({root, state}: { root: RootStore, state: RoomStore}){
super({root, state});
makeObservable(this);
this.homeRoomList = state?.homeRoomList ?? null;
}
async fetchRooms(category?: string, page:number = 0){
const [error,response] = await this.api.GET<GetRoomsPayload>(`/room/${category}?page=${page}`);
if(error){
throw Error(error.error)
}
if(response && response.success){
const { data } = response
this.feedFetchHomeRooms(data.rooms);
return response.data;
}
return Promise.resolve();
}
#action.bound
feedFetchHomeRooms(rooms: GetRoomsPayload["rooms"]){
if(rooms){
if( this.homeRoomList) {
this.homeRoomList = [...this.homeRoomList, ...rooms];
}
else {
this.homeRoomList = rooms;
}
}
}
}
// HomePage Component
const HomePage: FC & HomePageInitStoreOnServer = ({}) => {
const { pathname } = useLocation();
const homeRef = useRef<HTMLUListElement>(null);
const infiniteScrollTargetRef = useRef<HTMLDivElement>(null);
const { roomStore } = useMobxStores();
const handleLoadMore = () => {
throttleFetch();
}
const throttleFetch = useCallback(throttle(() => {
roomStore.fetchRooms()
},500),[]);
useInfiniteScroll({
target: infiniteScrollTargetRef,
cb: handleLoadMore,
});
useEffect(() => {
if(!roomStore.homeRoomList){
roomStore.fetchRooms()
}
},[]);
return (
<section >
<RoomContainer ref={homeRef}>
{roomStore.homeRoomList?.map((room: any) => {
return (
<Card
room={room}
key={room.id}
/>
);
})}
</RoomContainer>
<InfiniteScroll targetRef={infiniteScrollTargetRef}/>
</section>
);
};
export default observer(HomePage);

Answer 1

The component (HomePage) that renders observable data needs to be wrapped into the observer.
import { observer } from 'mobx-react-lite'
const HomePage = observer(() => {
// your code of component
})
you can find more details in official docs here