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

Nobody has claimed this yet.

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:

```js
"use client";

const Masonry = (props: Props) => {
const pathname = usePathname();
...
const MasonryCard = useCallback(
({ data }) => (

),
[
pathname,
props.var1,
props.var2,
props.var3,
...
],
);

return (

);
};

export default Masonry;
```

```js
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

The issue names no files, tests, or entry points. Start by reviewing the library documentation and the React/Next.js usage described in the example, then determine whether it needs clearer guidance on React.memo, hook dependencies, and prop drilling; done would be an agreed documentation change that answers those questions.

Written by the indexing model from the issue text.