# hoc-pattern
Teaches your AI assistant the Higher-Order Component pattern to share logic across React components. Useful for reusable auth, logging, or data fetching.
- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1000 installs · ★ 257
- Author: patterns.dev
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/PatternsDev/skills/tree/HEAD/react/hoc-pattern/SKILL.md
- Updated: 2026-04-15
- HTML: https://affpapa.org/en/nevibecode/skills/hoc-pattern
## What it does
This skill instructs the agent on implementing the Higher-Order Component pattern across `.jsx` and `.tsx` files. It shows how to write a function that takes a component and returns an enhanced version. Examples include injecting styles, showing a loading state during data fetching via `withLoader`, and tracking hover events.
Composition order matters when combining multiple wrappers. The instructions highlight prop naming collisions and advise merging props carefully. In modern React 18+ code, custom hooks are preferred over HOCs because deep wrapper nesting clutters the component tree in DevTools.
## Install
### Claude Code (native platform)
1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill hoc-pattern -a claude-code
```
2. **Manually: put the files in place**
- File: `~/.claude/skills/hoc-pattern/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/hoc-pattern/
### Codex
1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill hoc-pattern -a codex
```
2. **Manually: put the files in place**
- File: `.agents/skills/hoc-pattern/SKILL.md` — For all projects use ~/.agents/skills/
### Cursor
1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill hoc-pattern -a cursor
```
2. **Manually: put the files in place**
- File: `.cursor/skills/hoc-pattern/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/
### GitHub Copilot
1. **GitHub CLI**
```bash
gh skill install PatternsDev/skills hoc-pattern
```
2. **Manually: put the files in place**
- File: `.github/skills/hoc-pattern/SKILL.md`
### Gemini CLI
1. **Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill hoc-pattern -a gemini-cli
```
2. **Platform CLI**
```bash
gemini skills install https://github.com/PatternsDev/skills --path react/hoc-pattern
```
### Windsurf (Devin Desktop)
**Manually: put the files in place**
- File: `.devin/skills/hoc-pattern/SKILL.md` — The legacy .windsurf/skills/ path still works
### OpenCode
**Skills CLI (Vercel)**
```bash
npx skills add PatternsDev/skills --skill hoc-pattern -a opencode
```
### Claude.ai
**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills
Where a file is given instead of a command, copy the files from the source to that path: https://github.com/PatternsDev/skills/tree/HEAD/react/hoc-pattern/SKILL.md
## When to use it
- share data fetching or authentication across components
- add loading states to components through an HOC wrapper
- avoid prop naming collisions during composition
- identify when to switch from HOC wrappers to React hooks
## Example prompts
- Show me how to write a withLoader HOC for the DogImages component
- Extract authentication logic into an HOC while avoiding prop collisions
- Explain whether to use an HOC or a hook for this component
## Source text · SKILL.md · MIT
Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: a7719d99f155f075.
BEGIN THIRD-PARTY FILE a7719d99f155f075
````text
---
name: hoc-pattern
description: Teaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentication, logging, or data fetching across multiple components.
paths:
- "**/*.tsx"
- "**/*.jsx"
license: MIT
metadata:
author: patterns.dev
version: "1.1"
related_skills:
- "hooks-pattern"
- "render-props-pattern"
---
# HOC Pattern
## Table of Contents
- [When to Use](#when-to-use)
- [When NOT to Use](#when-not-to-use)
- [Instructions](#instructions)
- [Details](#details)
- [Source](#source)
Within our application, we often want to use the same logic in multiple components. This logic can include applying a certain styling to components, requiring authorization, or adding a global state.
One way of being able to reuse the same logic in multiple components, is by using the **higher order component** pattern. This pattern allows us to reuse component logic throughout our application.
## When to Use
- Use this when the same uncustomized behavior needs to be applied to many components
- This is helpful when a component should work standalone without the added custom logic
## When NOT to Use
- When custom hooks can achieve the same result with less nesting and better readability
- In new React 18+ code where hooks are the idiomatic approach to sharing stateful logic
- When the HOC wrapper adds prop-name collisions or obscures the component tree in DevTools
## Instructions
- Create a function that takes a component and returns a new component with enhanced behavior
- Avoid naming collisions by renaming or merging props in the HOC
- Prefer React Hooks over HOCs for most new code to avoid wrapper hell and deep nesting
- Compose multiple HOCs carefully and be aware that the order of composition matters
## Details
A Higher Order Component (HOC) is a component that receives another component. The HOC contains certain logic that we want to apply to the component that we pass as a parameter. After applying that logic, the HOC returns the element with the additional logic.
Say that we always wanted to add a certain styling to multiple components in our application. Instead of creating a `style` object locally each time, we can simply create a HOC that adds the `style` objects to the component that we pass to it:
```js
function withStyles(Component) {
return props => {
const style = { padding: '0.2rem', margin: '1rem' }
return
}
}
const Button = () =>
const Text = () =>