How to improve performance in my code?

const CompareStats = () => {
 
  const [shown, setShown] = createSignal<Element[]>([]);
  const [targets, setTargets] = createSignal<Element[]>([]);

  let observer: IntersectionObserver;

  onMount(() => {
    const options = {
      root: document.querySelector("#scrollArea"),
      rootMargin: "0px",
      threshold: 0.01,
    };

    observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setShown((els) => [...els, entry.target]);
          observer.unobserve(entry.target);
        }
      });
    }, options);

    targets()?.forEach((el) => {
      observer.observe(el);
    });
  });

  onCleanup(() => {
    observer.disconnect();
  });

return ( <>   <PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/>
<PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/>
<PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/></>)


//Component:

const PieChartCustom: Component<{}> = (props) => {
  let ref;
let pie

// props.shown?.includes(ref) , this I believe slows down execution

  createEffect(() => {
    if (!pie && props.shown?.includes(ref) && props.data) {
      pie = new PieChart();
    }

    if (props.data && pie) {
      pie.update(props.data);
    }
  });

  onCleanup(() => {
    pie?.detach;
  });

  return (
    <div>
        <div
          ref={mergeRefs(props.ref, (el) => (ref = el))}
        /></div>)

const CompareStats = () => {
 
  const [shown, setShown] = createSignal<Element[]>([]);
  const [targets, setTargets] = createSignal<Element[]>([]);

  let observer: IntersectionObserver;

  onMount(() => {
    const options = {
      root: document.querySelector("#scrollArea"),
      rootMargin: "0px",
      threshold: 0.01,
    };

    observer = new IntersectionObserver((entries, observer) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setShown((els) => [...els, entry.target]);
          observer.unobserve(entry.target);
        }
      });
    }, options);

    targets()?.forEach((el) => {
      observer.observe(el);
    });
  });

  onCleanup(() => {
    observer.disconnect();
  });

return ( <>   <PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/>
<PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/>
<PieChartCustom ref={(el: Element) => {setTargets((p) => [...p, el]);}} shown={shown()}/></>)


//Component:

const PieChartCustom: Component<{}> = (props) => {
  let ref;
let pie

// props.shown?.includes(ref) , this I believe slows down execution

  createEffect(() => {
    if (!pie && props.shown?.includes(ref) && props.data) {
      pie = new PieChart();
    }

    if (props.data && pie) {
      pie.update(props.data);
    }
  });

  onCleanup(() => {
    pie?.detach;
  });

  return (
    <div>
        <div
          ref={mergeRefs(props.ref, (el) => (ref = el))}
        /></div>)

props.shown?.includes(ref)

props.shown?.includes(ref)

new pieachart

new pieachart

entry.isIntersecting

entry.isIntersecting