🐏 How React memoization works

First you should know whats happening when using React and JSX

import React from 'react' function SomeChildren() { /* ... */ return null /* ... */ } function LinkWrapper(props) { /* ... */ return null /* ... */ } function App() { return ( <LinkWrapper uselink> <SomeChildren /> </LinkWrapper > ) } 

When compiling JSX, Function App becomes

import React from 'react' function App() { return React.createElement( LinkWrapper, // component { useLink: true }, // props React.createElement(SomeChildren) // children ) } 

And at runtime when React calls your function, here is what your function will return
Replaced App return with what kind of data React.createElement is returning.

function App() { return { "$$typeof": Symbol(react.element), "type": LinkWrapper, "props": { "useLink": true, "children": { "$$typeof": Symbol(react.element), "type": SomeChildren, "props": {} } } } } 

So at every call, React will always get a new definition of your App,
This will trigger to get the definition for all tree of components.
Note: This will not actually render to DOM anything. React just needs to know if anything changed.

Now for example you use React.memo to memoize your LinkWrapper

const LinkWrapper = React.memo((props) => { return null /* ... */ }) 

This will make React to receive previous LinkWrapper return value if props were not changed.
Note: By default it will only shallowly compare complex objects in the props object.

Now let's come back at our App

function App() { return ( <LinkWrapper uselink> <SomeChildren /> </LinkWrapper > ) } 

As I explained above <SomeChildren /> always will return a new React definition.
This means that using React.memo on LinkWrapper will not have any effect.
Because children always will be a new definition.

If you want to also memoize children you will have to do it manually.

function App() { const memoChildren = React.useMemo(() => <SomeChildren />, []) return ( <LinkWrapper uselink> {memoChildren} </LinkWrapper > ) } 

This can also be wrote as

function App() { const memoChildren = React.useMemo(() => <SomeChildren />, []) return ( <LinkWrapper uselink children={memoChildren} /> ) } 

Now memoChildren will always have same value between re-renders
Now LinkWrapper will also see that children did not change,
and will return last memoized value without calling the function again