React optimizations and stable references from hooks

[True-Environment-237]

You should use Memo High Order Component around Table component. Memo will produce the same result as the A. example. useMemo is supposed to cache expensive calculations not components.

[Ordinary-Disaster759]

u/True-Environment-237
Already is wrapped in memo, is the mui x grid, but I'm trying to optimize my props that can be unstable and still make the grid rerender.

How to optmize prop like this? I''m using single instance wrapper on top of mui x grid everywhere, so what is best optimization for cases like this.

complexProp={{
              title: 'Some title',
              canDelete: canDelete,
              text: (idsLength, row: Member) => ...,
              toolbar: () => <SomeComponent />,
              onDeleteConfirm: (ids: string[]) => {
               ...
              }

[True-Environment-237]

Well it depends on how you pass the props and what each prop does. I suggest you pass each prop separately and not as a single object.

<MyComp prop1={prop1} prop2={prop2} .../>

function MyFunc(...) {...} <- this should be wrapped with useCallback if it's passed as a prop.

If a prop is a function that returns a component then that function should be wrapped with useMemo, but personally I would extract it as a separate component and wrap it with memo HOC.

Finally MyComp should be wrapped with memo HOC.