The Chrome browser is using more than 1 gigabyte of memory.

[kindunq]

Question

const drawChart = useCallback(() => {
    if (id) {
      root.current = am5.Root.new(`wordCloud_${id}`);
      const themeName = themes === "dark" ? am5themes_Dark.new(root.current) : am5themes_Animated.new(root.current);

      handleSetRootTheme(root.current, themeName);

      const container = root.current.container.children.push(
        am5.Container.new(root.current, {
          width: am5.percent(100),
          height: am5.percent(100),
          layout: root.current.verticalLayout,
        })
      );

      // background setting
      series.labels.template.setup = (labels) => settingBackground(labels, root.current);

      series.labels.template.events.on("click", function (ev) {
         ...some logic
      });

      series.labels.template.events.on("rightclick", function (ev) {
        ...some logic
      });

      // hover 이벤트
      series.labels.template.events.on("pointerover", function (ev) {
         ...some logic
      });

      series.labels.template.events.on("pointerout", function (ev) {
      ...some logic
      });

      series.labels.template.events.on("wheel", function (ev) {
      ...some logic
      });

      series.data.setAll(search);
    }

  }, [id, themes, search, color, selected]);

  useEffect(() => {
    if (root.current) root.current.dispose();
    drawChart();

    return () => {
      if (root.current) {
        root.current.dispose();
        root.current = null;
      }
    };
  }, [drawChart, id]);

Thank you for providing such a great open source.

I am using amchart5 in my nextjs application.

I keep getting memory leaks in the browser when I put multiple charts on one screen .

I searched and saw that it says to ref the root instance.

When useeffect's cleanup function is executed

"root.current = null", but it doesn't have any effect.

Is there something wrong with my code?

Is it because I'm not calling the event.off method?

Environment (if applicable)

Additional context

[martynasma]

You need to dispose the root element root.dispose().

https://www.amcharts.com/docs/v5/getting-started/root-element/#disposing