BpmnJs in functional react component

[edobm]

Hi all,
I embbedded the BPMN viewer into my own react functional component as follows:

const BpmnViewerFunctional = (props) => {
    const {keycloak} = useKeycloak();

    const containerRef = useRef(null)

    const [modelId] = useState(props.modelId);
    const [bpmnExpand, setBpmnExpand] = useState(["cs"])
    const [xmlDiagram, setXmlDiagram] = useState(null)

    const bpmnViewer = new BpmnJS({
        container: containerRef.current,
        width: 300, height: 120
    });

    const handleGetModelBPMN = async () => {
        try {
            await dcpApis.getModelAsBPMN(modelId, keycloak.token, bpmnExpand)
                .then(res => {
                    setXmlDiagram(res.data)
                })
        } catch (error) {
            handleLogError(error)
        }
    }

    useEffect(() => {
        handleGetModelBPMN()
    }, [])

    useEffect(() => {
        if (xmlDiagram) {           
            bpmnViewer.importXML(xmlDiagram)
                .then(({warnings}) => {
                    console.log("Import done", warnings)
                    bpmnViewer.get('canvas').zoom('fit-viewport');
                })
        }

    }, [xmlDiagram])

    return (
        <div className="border-1 " ref={containerRef}></div>
    )
}

export default BpmnViewerFunctional

Then the component seems to get rendert two times.
After the first load the diagram gets added to the canvas.
After the second load the area of the div gets enlarged and the diagrams gets added again:

Also the BPMIO Logo is visible multiple times.

I would expect that a second load replaces the content of the viewer instead of adding a second diagram. Additionally the BPMNIO Logo should only be added once.
I observed that both diagrams seem to be independent as I can zoom in out indepently

Before my I created my functional implementation I used GitHub - bpmn-io/react-bpmn: Display BPMN 2.0 diagrams in React.

Any hint is very appreciated!

Best,
Meikel

[philippfromme]

@edobm

const bpmnViewer = new BpmnJS({
        container: containerRef.current,
        width: 300, height: 120
    });

You’re creating a new viewer every time the component renders. Have a look at GitHub - bpmn-io/react-bpmn: Display BPMN 2.0 diagrams in React.. It’s a bit outdated but you can translate the behavior into a functional component using hooks.