I inherited some very weird, unoptimised code and I need to optimise rendering without redoing the whole rednering mechanisim. So please be merciful

    <ReactNativeZoomableView
      ref={zoomRef}
      maxZoom={1.5}
      minZoom={0.5}
      initialZoom={1}
      doubleTapDelay={10}
      bindToBorders={true}
      contentHeight={height}
      contentWidth={width}
      ...
    >
      <Svg width={width} height={height}>
        <>
          {elementsA.map((element) => {
            <Element />;
          })}

          {elementsB.map((elementB, index) => {
            return (
              <Fragment key={elementB.node.id + index + 1}>
                <ELementB />
                {isActiveElement(elementB.node) &&
                  elementB.node.children.map((chld, childIndex) => {
                    return <ChildElementB key={'child' + child.id} />;
                  })}
              </Fragment>
            );
          })}
        </>
      </Svg>
    </ReactNativeZoomableView>

Notes about the above:

• elementsA list of objects is being passed as prop to this this component
• elementsB list of objects is calculated based on elementA list
• these are svgs, basically rendering a very big family tree, so using something like flatList wont work

All elementB nodes and its children node can be updated, on each update, the whole tree is rerendered (because it is being passed as prop) even though the elements have proper keys, if i update Element 1 -> ChildElementB state, i am seeing that everything is rerendered in profier.

Any tips on how to improve this? (Would also appreciate suggestion to a whole rendering approach revamp)

Sorry if the question is not clear, let me know i can try explain it better

The initial render is taking up to a second, and every other rerender is taking almost same amount of time. Hopefully this can be reduced