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?