Question about memoization / optimization when render component is dependent on hooks and props

[arthur-ver]

Hi!

First of all, thanks for the awesome library!

I have a question regarding optimization. In my case, I need to render thousands of heavy components and from the documentation it is not 100% clear how to approach memoization with this library. I'm using Next.js.

My setup looks like this:

"use client";

const Masonry = (props: Props) => {
  const pathname = usePathname();
  ...
  const MasonryCard = useCallback(
    ({ data }) => (
      <Card
        data={data}
        pathname={pathname}
        var1={props.var1}
        var2={props.var2}
        var3={props.var3}
        ....
      />
    ),
    [
      pathname,
      props.var1,
      props.var2,
      props.var3,
      ...
    ],
  );

  return (
    <MasonryScroller
      ...
      render={MasonryCard}
    />
  );
};

export default Masonry;

const Card = React.memo((props: Props) => {
...
})

Is React.memo for the Card component needed? Am I handling hook dependencies correctly? My idea was to prop drill hook deps instead of calling usePathname inside each Card. What would be the best approach here?

Best regards,
Arthur