BpmnJs in functional react component

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 => {
        } catch (error) {

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

    useEffect(() => {
        if (xmlDiagram) {           
                .then(({warnings}) => {
                    console.log("Import done", warnings)

    }, [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!


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.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.