I saw my team is using useCallback function to render different components base on the api status responses. Here is an example like what my team did, so my question here is, I don't really see people doing this in the community or any articles, would it consider best practice? If no, what is the recommended way to doing this? would you prefer create a new component then use React.memo() to wrap the component or any other solution you think would be better?
const componentA = () => {
const renderCardComponent = useCallback(() => {
if (api.status == "loading") {
return <LoadingPlaceholder />
}
// if the api status responses are succes you should not see the placeholder
return <div>{api.data}</div>
}, [api.status, api.data])
const renderCardComponentB = useCallback(() => {
if (api.status == "loading") {
return <LoadingPlaceholder />
}
// if the api status responses are succes you should not see the placeholder
return <div>{api.data} second data</div>
}, [api.status, api.data])
return <>
{renderCardComponent()}
{renderCardComponentB()}
</>
}