A pattern for conditionally applying React hooks.

daily.dev

Chris Bongers

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Refactoring internal hooks in Headless UI revealed a pattern for conditionally enabling React hooks. By passing an 'enabled' boolean as the first argument to hooks like useOutsideClick and useScrollLock, developers can control their activation based on component state, such as whether a dialog is open. This approach avoids unnecessary event listeners and memory usage, enhancing performance.

Conditional React hooks pattern

This is normal practice since hooks were invented, nothing new

That’s violate single responsibility principle.
I end up that best practice hide that condition hooks inside component that will be rendered conditional.
{isOpen $$ &lt;Dialog /&gt;}
And now all hooks inside dialog is conditional, also hooks and dialog is not responsible for open/close state

I rly thought it was some dark magic to remove the computation charge of the hook until u want to use, but its just an early return inside an useEffect haha, pretty cool tho!

Nice, thanks for sharing! As an alternative I find the Signals for preact/react far superior to useState and useEffect and none of their weaknesses.

Great piece here! You mentioned : “If it’s the last argument, then you can even use a default value.” can quite wrap my head around this. any tips ? Thank you.