Conditional React Hooks
Danar Widi
1 min read • 0 views
Learn how to conditionally use React Hooks by conditionally rendering a "renderless component".
You want to conditionally call a hook, but you can’t do that because of rules. What do you do?
The answer is remarkably simple: Conditionally render a renderless component that uses the custom hook.
Many years ago, I coined the phrase “renderless component” in this blog post. It’s a component that uses the lifecycle methods to update app state but has no associated UI. It renders null
, hence “renderless”. These days, replace “lifecycle methods” with “custom hooks”, and the same concept applies and, therefore, we can achieve the same result.
If we call a custom hook in a component:
function AutoSave({ data }) {
useAutoSave(data)
return null
}
And then conditionally render that component in another component:
function Document({ data, shouldAutoSave }) {
return (
<div>
{shouldAutoSave && <AutoSave data={data} />}
<div>
<Editor data={data} />
</div>
</div>
)
}
I can’t tell you when or why you may need to do this, but it’s a little tool to throw in your toolbelt and pull out when the occasion calls for it.