Clarification regarding "React Optimization" section in docs

[Omriruvio]

In the React Optimization section of the docs exists a suggestion to postpone dereferencing by using "getter" functions:

const MyComponent = ({ person, car }) => (
    <>
        <GenericNameDisplayer getName={() => person.name} />
        <GenericNameDisplayer getName={() => car.model} />
        <GenericNameDisplayer getName={() => car.manufacturer.name} />
    </>
)

This suggestion is unclear to me for two reasons:

1. I suppose the example is intentionally not wrapping MyComponent in observer to avoid dereferencing person.name (for example) and from triggering re-renders on MyComponent. How would this look like if we were to access person or car from a store inside MyComponent instead of receiving it from props?
2. Aren't we passing (unmemoized) new functions on every render of MyComponent which would mean GenericNameDisplay gets re-rendered every time MyComponent does?

[tonyraoul]

⚠️ Not a maintainer, I hope my answer is somehow useful.

Question 1:

I suppose the example is intentionally not wrapping MyComponent in observer to avoid dereferencing person.name (for example) and from triggering re-renders on MyComponent.

I the parent component MyComponent doesn't fire getName when it renders, thus it won't dehance person.name.

How would this look like if we were to access person or car from a store inside MyComponent instead of receiving it from props?

I believe it would have the same behaviour as the getX function, however you can't re-use the component and use a store.
Have a look on Dereference values late section.

Question 2:

Aren't we passing (unmemoized) new functions on every render of MyComponent which would mean GenericNameDisplay gets re-rendered every time MyComponent does?

That looks like a valid concern here depending on your use case.
I believe the key takeaway from this example is to move re-rendering to the leafs of the VDOM tree, the parent isn't expected to re-render in this example, it's a bit hard to make a statement about using memoized values here without understanding the context, might be a viable option I guess.

[mweststrate]

Aren't we passing (unmemoized) new functions on every render of MyComponent which would mean GenericNameDisplay gets re-rendered every time MyComponent does?

Yeah that would need a useCallback (with no deps) wrapper indeed if you expect parent to re-render a lot. That whole section is significant overkill and probably adds more confusing than valuable information :)