Refactoring for Scalability: Organizing Hooks in Prueba-Tecnica-2

Introduction

In the Prueba-Tecnica-2 project, we recently took a step back to evaluate how our component logic was being managed. As the application grows, keeping logic tightly coupled to view components can lead to bloated files and duplicated code. We initiated a refactoring effort to centralize our custom hooks, improving maintainability and readability across our feature modules.

The Challenge: Logic Drift

Previously, our state management logic—specifically related to ticket data processing—was scattered. When multiple components needed to interact with the same data source, we often found ourselves importing from deep, inconsistent file paths. This "logic drift" makes it harder for new developers to understand where the source of truth resides for specific business rules.

The Solution: Centralized Hooks

We decided to move shared logic into a dedicated hooks directory. By consolidating custom hooks like useTicks, we established a cleaner boundary between our side-effect logic and our UI presentation layers.

Before: Component-Coupled Logic

// In some component file
import { useTicks } from '../features/tickets/list/useTicks';

After: Standardized Access

By centralizing, we can now import from a standard location, making our codebase easier to navigate:

// Clean and centralized
import { useTicks } from '@/hooks/useTicks';

Benefits of this Approach

1. Simplified Imports: No more hunting through deeply nested folder structures. The hooks folder provides a single entry point for shared functionality.
2. Encapsulation: By wrapping API calls (often handled via Axios) and validation logic (using Zod) inside these hooks, we keep the components focused purely on rendering.
3. Improved Testability: Moving logic into isolated hooks allows us to write unit tests for the data-fetching and state-transformation logic without needing to mount full React components.

Actionable Takeaway

If you find your components folder becoming a graveyard of mixed concerns, start by identifying shared stateful logic and moving it into a top-level hooks directory. Your components will become thinner, easier to read, and significantly faster to test. Start by moving one hook today—you will notice the immediate reduction in import complexity.

Generated with Gitvlg.com