08-recipes/08-make-code-more-reusable.md

Make code more reusable

Use this recipe when duplicated logic appears across components, sections, or features.

The goal is to consolidate repeated behavior into a clearer shared abstraction without introducing unnecessary complexity.

Steps

1. Identify duplicated logic (UI fragments, helpers, API calls, reducer helpers). 2. Confirm the duplication is real and likely to appear again. 3. Extract the logic into a reusable unit:

component (for reusable UI)
section (for reusable feature-local orchestration)
helper function (for small utilities)
API client method (for remote calls)

4. Replace duplicated code with the new reusable unit. 5. Keep naming descriptive and consistent with the existing patterns.

Where reusable code should live

Feature‑specific reuse → inside the feature folder
Cross‑feature reuse → shared/

Example:

features/files/components/FileCard.js
shared/api/itemsApi.js

What to avoid

Do not extract abstractions too early.

Avoid creating generic helpers that hide meaning or make the code harder to follow.

Final rule

Extract reusable code only when it clearly reduces duplication while keeping ownership and intent easy to understand.