When should I use the Slot component instead of the useContent hook?
Hi all, reading through the React SDK docs and I see there's both a <Slot> component and a useContent hook that seem to do the same job. Is there an actual difference in how they load content, or is it just ergonomics? I don't want to pick one now and regret it later when the loading states start misbehaving
Cheers, Shauna
1 answer
They fetch content exactly the same way, so it really is ergonomics.
<Slot> is the declarative wrapper for the plain "render whatever the slot returns" case. You give it the slot ID and a render function and you are done.
useContent gives you the content value directly, which is what you want when the content feeds into custom logic, gets combined with other data, or is passed down to components that should not know about Croct at all:
const {title, ctaLabel} = useContent('home-hero', { fallback: {title: 'Welcome', ctaLabel: 'Get started'},});Loading behavior is identical: both rely on React Suspense while the content is being fetched. So either way you need a <Suspense> boundary above the component, or you pass an initial/fallback value so it can render immediately without suspending.
My rule of thumb: start with useContent, reach for <Slot> when the component is literally just a passthrough.
Great, that settles it. Went with useContent plus a fallback and the loading state is a non-issue. Cheers Dermot!