Re-rendering issues when using custom components

[Mohamed-Taha-Sta]

Amazing package so far. I however came across an issue where when I add custom components to the AnimatedMarkdown component, I started having re-rendering issues. I'm not sure if this is the case because of a limitation or a misuse on my part.

I would greatly appreciate any insight.

[joecottam]

I ran into the same issue, I was able to resolve it by using useMemo on the customComponents object e.g.:

  const customComponents = useMemo(() => {
    return {
      yourtag: ({ animateText, children }: any): unknown => {
        return animateText(<YourTag {children} />);
      },
    };
  }, []);

  return (
    <div className={className}>
      <AnimatedMarkdown
        content={content}
        animation={streaming ? 'fadeIn' : null}
        animationDuration="0.5s"
        animationTimingFunction="ease-in-out"
        customComponents={customComponents}
      />
    </div>
  );

[Mohamed-Taha-Sta]

@joecottam Thanks, but I believe I tried useMemo (Memory's vague). I think the issue runs deeper for me. And side not I'm currently using React compiler so I don't have to manually use hooks like useMemo and useCallback.

Thanks either way!