skills.rest
TierOne-Studio
TierOne-StudioOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hoc-pattern

Explains the React Higher-Order Component pattern for reusing component logic across applications.

1|Updated Apr 3, 2026
Search Tags:#refactoring#react#custom hooks#component reuse#design pattern#hoc#higher-order component
One-click install
npx skills add https://github.com/TierOne-Studio/spa-velocity --skill hoc-pattern-tierone-studio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hoc-pattern
Source: https://github.com/TierOne-Studio/spa-velocity/tree/main/.ruler/skills/hoc-pattern
Command: npx skills add https://github.com/TierOne-Studio/spa-velocity --skill hoc-pattern-tierone-studio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Legacy React codebases often rely on Higher-Order Components to share logic like styling, loading states, and authorization across components, and developers need guidance to read, refactor, or deliberately keep this pattern instead of blindly rewriting it. ## Core Features & Use Cases - HOC Recognition and Implementation: Learn how to build HOCs like withStyles and withLoader that wrap components with shared behavior. - HOC vs Hooks Decision Guidance: Compare HOCs, custom hooks, and render props to choose the right approach for cross-cutting concerns such as auth, analytics, and error boundaries. - Refactoring Support: Understand prop-name collision handling, HOC composition order, and when to migrate a HOC to a custom hook like useHover. - Use Case: While modernizing a legacy React app, you encounter withAuth and withLoader wrappers and use this Skill to decide whether to keep, compose, or convert them to hooks. ## Quick Start Ask the assistant to review a legacy React component wrapped in HOCs and recommend whether to refactor it into custom hooks.

Frequently Asked Questions about hoc-pattern

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is a Higher-Order Component in React?▼

A Higher-Order Component is a function that takes a component and returns a new component with added behavior, such as injected styles or fetched data. It lets you keep shared logic in one place and apply it to many components.

HOC vs custom hooks: which should I use in React?▼

Custom hooks are usually the better choice in modern React because they reduce component tree nesting and improve readability. HOCs still fit when the same uncustomized behavior must be applied to many components that work standalone without it.

How do I convert a HOC to a custom hook?▼

Move the shared logic into a hook that returns the needed values, such as a ref and a hovering boolean for a useHover hook. Then call the hook directly inside the component instead of wrapping the exported component with the HOC.

Why do HOCs cause prop name collisions?▼

A HOC injects props into the wrapped component, and if the component already defines a prop with the same name, the HOC value overwrites it. Fix this by renaming the injected prop or merging values, such as spreading props.style into the HOC's style object.

When should I avoid using the HOC pattern?▼

Avoid HOCs in new React 18+ code where hooks achieve the same result with less nesting, and when composing multiple HOCs makes it hard to trace which wrapper supplies which prop. Deep HOC nesting also obscures the component tree in DevTools.

Related Skills

Explore More Software Engineering Skills→
PatternsDevPatternsDev
235

hooks-pattern

Create reusable custom hooks with useState and useEffect for React components.

Official
Intermediate
trungenglishtrungenglish
1

hooks-pattern

Teaches React Hooks for extracting reusable stateful logic into custom hooks.

Community
Basic
langfuselangfuse
34.0k

vercel-composition-patterns

Guides React component refactoring using compound components, context providers, and composition patterns.

Official
Intermediate
trungenglishtrungenglish
1

render-props-pattern

Implements the render props pattern for sharing rendering logic between React components.

Community
Basic