🐏 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