Org Chart Node flickering in React

[amit08255]

I am using basicprimitives in ReactJS and using custom node. It is only single div. but it is flickering on render:

const itemNode = ({ context: itemConfig }:NodeProps) => (
    <div style={{ backgroundColor: itemConfig.isPlaceholderContact ? 'red' : itemConfig.isPartnerContact ? 'green' : 'white' }}>{`${itemConfig.firstName} ${itemConfig.lastName}`}</div>
);

const orgConfig = {
        items: getLinkedContacts(),
        scale,
        pageFitMode: PageFitMode.None,
        hasSelectorCheckbox: Enabled.False,
        defaultTemplateName: 'contactTemplate',
        calloutMaximumVisibility: Visibility.Normal,
        minimumVisibleLevels: 1,
        normalLevelShift: 40,
        dotLevelShift: 20,
        normalItemsInterval: 10,
        dotItemsInterval: 8,
        lineItemsInterval: 4,
        cursorItem: searchedActiveContact,
        templates: [{
            name: 'contactTemplate',
            itemBorderWidth: 0,
            itemSize: { width: 235, height: 100 },
            cursorPadding: {
                left: 3, top: 3, right: 0, bottom: 0,
            },
            cursorBorderWidth: 0,
            onCursorRender: cursorItem,
            highlightBorderWidth: 0,
            onHighlightRender: highlightItem,
            onItemRender: itemNode,
        },
        {
            name: 'contactDot',
            itemBorderWidth: 0,
            itemSize: { width: 9, height: 10 },
            cursorPadding: {
                left: 0, top: 0, right: 0, bottom: 0,
            },
            cursorBorderWidth: 0,
            onCursorRender: cursorItem,
            highlightBorderWidth: 0,
            onHighlightRender: highlightItem,
            onItemRender: dotItemNode,
        },
        ],
    };

Video of the issue can be found below:

https://www.veed.io/view/e31b6f25-b101-410b-bcac-f3e9b1f6874c?sharingWidget=true https://www.veed.io/view/ea162037-1c93-4bcd-a693-9bd8c4c1f6f4?sharingWidget=true

[BasicPrimitives]

Most likely you regenerate the entire diagram without caching. Our React component uses React virtual DOM to render its content. React is responsible for caching and reuse of existing DOM elements. Look at React best practices.