React - useEffect based on service variable - reactjs

Question

I have a question about usage of React.useEffect function based on the variable being a part of a service which I use to make some magic behind.
import React, { useEffect } from "react";
import { treeStructureService } from "../../services/dependency_injection";
import "./ModelTree.css";
const ModelTree = (props: any) => {
useEffect(() => {
// some code
console.log('Use Effect runs...')
}, [treeStructureService.tree])
return <div>ModelTree</div>;
};
export { ModelTree };
TreeStructureService.tree changes the variable depending upon the upload of new files to a project. Such action takes some time in the background, which is why I tried to use such a variable in useEffect to rerender the tree again when changes were propagated to the service.
The most interesting part of the TreeStructureService was presented below:
import { TreeNode } from "../../interfaces/tree_node";
import { modelLoaderService } from "../dependency_injection";
export class TreeStructureService {
public tree: TreeNode | undefined;
constructor() {}
async addTreeToProject(modelID: number, newTree: TreeNode):Promise<void> {
if (modelID == 0) {
this.tree = newTree;
}else{
console.log('Doing magic')
}
}
}
In dependency injection, necessary services are called and exported to use the "equivalent" of DependencyInjection from Angular.:
import { IFCLoaderService } from "./viewer/model_loaders/ifc_loader_service";
import { ModelLoaderService } from "./viewer/model_loaders/model_loader_service";
import { SelectionService } from "./viewer/selection_service";
import { ThreeSceneService } from "./viewer/three_scene_service";
import { TreeStructureService } from "./viewer/tree_structure_service";
import { VisibilityService } from "./viewer/visiblity_service";
export const modelLoaderService = new ModelLoaderService();
export const ifcLoaderService = new IFCLoaderService();
export const threeSceneService = new ThreeSceneService();
export const selectionService = new SelectionService();
export const visibilityService = new VisibilityService();
export const treeStructureService = new TreeStructureService();
I'll be glad for any suggestions. In the next steps, I'll add redux to control the state of the application. So maybe you have some idea that I could pass a new tree as an action argument? However, I don't know how to do it outside of the components.

Answer 1

While you don't need any fancy code to connect your tree model to React, there a few ways to do that.
Basically, you have to wire or connect your state changes.
You could write your own event emmitter, then subscribe via react hook, but here is straightforward shortcut. Mobx does this for you
import React, { useEffect } from "react"
import { treeStructureService } from "../../services/dependency_injection"
import "./ModelTree.css"
import { TreeNode } from "../../interfaces/tree_node"
import { modelLoaderService } from "../dependency_injection"
// Step 1: Notice 2 new imports
import { makeAutoObservable } from "mobx"
import { observer } from "mobx-react-lite"
export class TreeStructureService {
public tree: TreeNode | undefined
constructor() {
// Step 2: notice that I mark `tree` as observable
makeAutoObservable(this)
}
async addTreeToProject(modelID: number, newTree: TreeNode): Promise<void> {
if (modelID == 0) {
this.tree = newTree
} else {
console.log("Doing magic")
}
}
}
// Step 3: Notice the observer wrapper from "mobx-react-lite"
export const ModelTree = observer((props: any) => {
// This re-render when TreeNode changes
console.log(treeStructureService.tree)
return <div>ModelTree</div>
})