我不打算回答你的问题，因为我认为你对那个钩子的真正目的感到困惑。相反，我会给予你一个更好的理解。
useMemo用于在组件中进行非常繁重的计算。这个钩子所做的是，它将state/props作为依赖项，除非这些依赖项发生变化，否则它不会重新执行计算。这意味着如果你有一个组件在渲染时进行非常繁重的计算，导致你的应用程序变慢，你需要将计算 Package 在useMemo中，以防止在重新渲染时重新计算你的繁重计算。在你的情况下，你有沉重的计算标题组件？绝对不是。所以你用错了钩子。
你需要的是React.memo。这将把你的组件转换成PureComponent，如果你的组件只显示静态内容，它将跳过不必要的重新呈现。

首先，如果你想用useMemo记忆组件，如果重新渲染需要时间，它是有用的，否则它不会改变任何东西。
如果你不使用它：

• 如果Template组件重新呈现，则title不会
• 如果返回Template的父组件重新呈现，则title和Template也将重新呈现

如果您使用它：

• 如果Template组件重新呈现，则title不会
• 如果返回Template的父组件重新呈现，则Template也将重新呈现，但title仅在依赖数组中存在差异时才会重新呈现

这个东西<Component ... />返回一个对象（React调用createElement并返回一个对象）。

• 当组件与前一个组件不同时，会发生渲染。
• 当React.createElement返回的对象与上一次渲染的对象不同（通过引用）时，会发生重新渲染

检查此示例（在控制台中）：https://stackblitz.com/edit/react-ipc475?file=src%2FApp.js仅当依赖数组中有任何更改时，useMemo中的组件才会重新呈现

尝试使用useMemo总是很好的。
它的作用：它记忆你的组件/数据，并在依赖数组的任何变量发生变化时重新渲染。因此，当任何其他状态变量发生变化时，react将不必重新呈现此记忆化组件，从而提高性能。
一些用例包括：

• 当你在你的组件或变量中有一个繁重的计算
• 防止在API中重新获取相同数据

下面是一个如何使用它的小例子：

const [myVar, setMyVar] = useState<string>('abc')
const [myOtherVar, setMyOtherVar] = useState<number>(123)

return useMemo(() => (<>

  <div>Memoized: { myVar }</div>

  <div> Not memoized: {myOtherVar} </div>

</>),[myVar])

它在这里干什么？
当你使用setMyVar改变myVar的值时，react会重新渲染组件，更新它在dom中的内容。
但是如果你用setMyOtherVar改变myOtherVar的值，react不会重新渲染组件，它的值也不会在dom中更新。
PS：如果你改变了myOtherVar，然后你又改变了myVar，这两个值都会在dom中更新，因为重新渲染是在更新了未记忆化的变量之后完成的，所以react将获取所有变量的所有更新值。
Here是一个简单的codesandbox工作示例