React Fractal Compoundnents

In software development, the principles of fractals and compounding unlock opportunities for modularity, scalability, and reusability. In this post, we'll explore how fractal components in React can emulate the self-similarity found in nature, leveraging a consistent, layered design. Along the way, we'll borrow concepts from finance—how small, consistent actions compound over time—and show how applying these to your codebase can multiply software delivery efficiency.

Fractals: The Power of Self-Similarity

Fractals are recursive patterns that maintain their structure across different scales. Think of a fern leaf: its smallest parts mirror the structure of the whole. This concept of self-similarity ensures predictability and simplicity in complexity, a feature that's crucial in software systems.

Compounding in Finance and Code

In finance, compounding refers to generating earnings on reinvested earnings over time. Small, regular contributions snowball into substantial growth. Applied to software, this idea means designing systems where small improvements or extensions compound value without introducing technical debt. Fractal components create reusable building blocks that fit together seamlessly, enabling developers to move faster with less friction.

React Fractal Components: A Recipe for Modularity

In React, fractal design combines self-similarity with modularity. Here's how this approach applies:

1. Uniform Folder Structures: Each folder mirrors the same structure—organized by routes, features, or components.

2. Consistent Tech Stack: All components follow the same standards:

   • tanstack/react-query: Standardized data fetching and caching, following a predictable query model.
   • viem: Low-level Ethereum interactions with a modern TypeScript API.
   • wagmi: React hooks for Ethereum, built on top of react-query and viem for consistent data fetching patterns.
   • nuqs: URL-based state management decouples components from internal logic.
   • Supabase: A backend with API logic abstracted into dedicated folders, making backend and frontend portable and reusable.

3. Scalable Design Systems: Shadcn/UI and Tailwind CSS ensure a consistent and portable UI, adaptable even for generative design workflows (GenerativeUI).

4. Collocation with AHA Workflow: Components are refactored only when they naturally reveal the need for reusability (Avoid Hasty Abstractions).

Folder Structure

The project uses a consistent, self-similar folder hierarchy, promoting predictability and reusability:

repo/
  - supabase/
    - src/
        - market/
           - index.ts
           - types.ts
        - account/
          - index.ts
          - types.ts
  - hooks/
    - src/
      - market/
        - index.ts
        - types.ts
        - use-markets.ts
      - account/
        - index.ts
        - types.ts
        - use-account.ts
  - app/
    - src/
      - market/
        - list/
          - index.tsx
          - types.ts
        - detail/
          - use-market-collateral.ts
          - index.tsx
          - types.ts
      - account/
        - index.tsx
        - hooks/
          - use-account-health.ts
          - use-account-positions.ts
          - types.ts
        - health.tsx
        - positions.tsx
        - types.ts    

Concrete Implementation

1. Data Fetching with React Query

Here's how data fetching logic is standardized and portable, ensuring reuse on the frontend and backend:

// repo/hooks/useMarkets.ts
 
import { useQuery } from '@tanstack/react-query'
import { createSupabaseClient } from '@repo/db'
import { getMarkets } from '@/api/market'
 
export function useMarkets() {
  return useQuery({
    queryKey: ['markets'],
    queryFn: async () => {
      const supabase = await createSupabaseClient()
      return getMarkets({ supabase })
    }
  })
}