[material-ui][docs] Change composition code snippet from useMemo() to useCallback()

[adriancuadrado]

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps) but more readable.

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

• docs/data/material/guides/composition/composition.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 8f5bf19

[Janpot]

Since I'm requested as a reviewer I'll give my opinion here 🙂 but you probably want to assign a core team member.
When I look at this page, it looks as if we endorse the snippets under this section as valid solutions to the problem. IMO we should either clearly indicate that they are react anti-patterns, or remove them altogether. Personally I'm in favor for the latter, these snippets don't pass the react eslint rules.

[adriancuadrado]

@Janpot

As far as I have understood, using useCallback() don't pass the react eslint rules not because there is anything wrong with it, but because the linter is unable to make sure the dependencies are correctly specified because it can't tell how is the callback implemented.

I'd understand if you didn't accept it but I think it would make more sense to get rid of that lint rule altogether.

I don't understand why you say it's a react anti pattern. If it is because there is a component being defined inside another, then we won't be able to explain how to deal with that use case altogether if we just remove it.

[Janpot]

Neither passes the react eslint rules. I have no preference for one syntax over the other, as far as I know there is no real benefit for either syntax. So I'm leaving that decision for the core team to make.

My comment is mainly about my impression when I opened this page. I didn't immediately get the notion that these were snippets that explain how not to implement this. They are React anti-patterns because they not only cause rerenders when to changes, they cause remounts of the Link component. That's why my recommendation would be to either indicate more clearly that these snippets are not to be copied by users, or to omit them altogether. But in any case, that doesn't have to be part of this PR.

cc @mnajdova

[ZeeshanTamboli]

I agree with @Janpot—using this pattern is a React anti-pattern, even when wrapped with React.useCallback or React.memo. For more details, see the ESLint rule.

I've updated the Composition docs in PR #43266, so I'll close this PR. Thanks, @adriancuadrado, for bringing this issue to light.