One of my clients creates a custom hook for *every* React component
One of my clients creates a custom hook for *every* React component. So every component is only JSX.
Example:
User.tsx // Just JSX
useUser.ts // All User component logic
Benefits:
✅ Can unit test just JSX by mocking a single hook
✅ The component file is simple. It’s just JSX.
Downsides:
🚩 Reduces locality of behavior. Have to constantly jump between at least two files to work with the component and fully understand it.
🚩 More code. Must export all state and functions from the hook, then reimport and typically destructure all the properties.
🚩 Creates ambiguity. Where should the prop declaration be? In the component or in the component’s dedicated custom hook?
🚩 Encourages creating a monolithic custom hook instead of abstracting small, focused, well-named custom as when needed.
Summary: Every abstraction has a cost. I don’t think this pattern adds enough value to justify its cost.
Poll: How do you feel about the “dedicated hook for every component” pattern?
Poll: How do you feel about the “dedicated hook for every component” pattern?