Im attempting to return a HOC component from within the hook.
Let's say I have a top level component as...
function Component(props){
//do something with props;
return <h1>Hello {props.title}</h1>
}
And a hook which knows some props, and wants to free the user from providing those props
function useHook(){
//somehow get prop values at runtime(say title)
const title = //get from API call;
return (props) => <Component title={title} {...props}/>
}
Any idea why infinite rerendering happens here? Should I be using useCallback?
React Hooks return children wrapping component
The Problem was addressed here. useCallback solved the infinite re-render. Looks like the hook was recreating the component upon every run (function reference changes upon every run, though it looks like its the same function).
function useHook(){
//somehow get prop values at runtime(say title)
const title = //get from API call;
return useCallback((props) => <Component title={title} {...props}/>,[title]);
}