SolidJS•2y ago

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>)

Like commented in code I think this line slows down execution

props.shown?.includes(ref)

props.shown?.includes(ref)

. But I havent been able to figure out how to create

new pieachart

new pieachart

in child component from parent component efficiently when

entry.isIntersecting

entry.isIntersecting

is true in parent component.

5 Replies

thetarnav•2y ago

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

what do you mean? I think it's just not gonna be reactive

MassukkaOP•2y ago

I think it gets rerun everytime shown gets set in parenti component

thetarnav•2y ago

if you run it outside of the effect it won't track, so it's a bug, not performance issue do you need to recreate new PieChart every time the element becomes visible/invisible? how is it used btw?

MassukkaOP•2y ago

No, only create if it doesnt exist and is intersecting piechart gets id as parameter and it attaches it .id in div So would the reactivity work better if observer = new intersectionObser,... was inside effect? but it sounds like it would just create new intersection obs instances

thetarnav•2y ago

I don't think there is anything wrong about the observer. You can call onCleanup inside onMount to not hoist the variable maybe

Gaming

Programming

How to improve performance in my code?