HOC在react钩子中，导致无限次渲染

Question

我试图从钩子中返回一个HOC组件。

假设我有一个顶级组件…

function Component(props){
//do something with props;
return <h1>Hello {props.title}</h1>
}

和一个钩子，它知道一些道具，并且想把用户从提供这些道具中解放出来

function useHook(){
//somehow get prop values at runtime(say title)
const title = //get from API call;
return (props) => <Component title={title} {...props}/>
}

知道为什么这里会发生无限重渲染吗?我应该使用useCallback吗?

Answer 1

React Hooks返回子封装组件

问题在这里被解决了。useCallback解决了无限重渲染。看起来钩子在每次运行时都在重新创建组件(函数引用在每次运行时都会改变，尽管它看起来是同一个函数)。

function useHook(){
//somehow get prop values at runtime(say title)
const title = //get from API call;
return useCallback((props) => <Component title={title} {...props}/>,[title]);
}