Decouple Your Code - How to Separate Business Logic from UI

Decoupling your business logic from UI is key for building maintainable React apps. Tightly coupled code is hard to understand, reuse, test and upgrade.

By clearly separating responsibilities into distinct layers, you can craft lean, flexible codebases.

This article explores proven strategies like custom hooks, HOCs and redux to decouple components for cleaner code and fewer bugs.

Why Loosely Coupled Code Matters

Symptoms of tightly coupled React code include:

• Duplicated logic across components
• Large tangled component files doing too much
• Difficulty testing UI and logic together
• Changes cascading across unrelated components

This hurts productivity in several ways:

• Less reusable code - Can’t share logic across the app
• Reduced agility - Changes require sweeping edits
• Integration headaches - Hard to test and maintain
• Lower scalability - App structure doesn’t grow cleanly

Well-structured code avoids these pitfalls. Decoupled apps are easier to:

• Understand - Clear responsibilities and boundaries
• Change - Isolated components reduce side effects
• Maintain - Less complexity eases debugging
• Scale - Modular units avoid bottlenecks

Let’s explore effective strategies to decouple components.

Ways to Decouple Business Logic

Here are proven techniques to extract business logic:

Custom Hooks

Custom hooks 🔗 offer a lightweight way to reuse stateful logic:

function Counter() {
  // Delegate logic to hook  
  const { count, increment } = useCounter() 
  
  return (
    <button onClick={increment}>
      {count}
    </button>
  )
}

function useCounter() {
  const [count, setCount] = useState(0)

  // Encapsulate reusable logic
  function increment() {
    setCount(prev => prev + 1)
  }

  return { count, increment }
}

Custom hooks keep components clean. Logic moves to reusable functions.

Higher Order Components

Higher order components (HOCs) 🔗 are another decoupling strategy:

// HOC encapsulates logic
function withCounter(Component) {
  return props => {
    const [count, setCount] = useState(0)

    function increment() {
      setCount(count + 1)
    }

    return (
      <Component
        {...props}
        count={count}
        increment={increment} 
      />
    )
  }
}

function Button({ count, increment }) {
  return <button onClick={increment}>{count}</button>
}

export default withCounter(Button)

HOCs provide capabilities like data fetching, subscriptions etc.

Redux State Management

Redux offers industrial-strength decoupling:

// Component dispatches actions 
function Counter({ count, increment }) {
  return <button onClick={increment}>{count}</button>
}

// Action creator  
function increment() {
  return { type: 'INCREMENT' }
} 

// Reducer handles logic
function counter(state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    default:
      return state
  }
}

Redux scales for complex workflows. Overkill for small apps.

Dependency Injection

Enterprise apps use dependency injection (DI) to decouple services:

// Service encapsulates logic
class CounterService {
  constructor() {
    this.count = 0
  }

  increment() {
    this.count++ 
  }
}

// Component consumes service 
function Counter(props) {
  return <button onClick={props.counter.increment}>
    {props.counter.count}
  </button>
}

const counter = new CounterService()

<Counter counter={counter} />

Angular, Spring and other frameworks leverage DI heavily.

When To Decouple Code

Aim for high cohesion and loose coupling. But don’t overengineer. Indicators to refactor include:

• Duplicated logic across components
• Large confusing components
• Hard-to-test UI and logic together
• Cascading changes across app

Start by colocating code, then decouple as needed.

Benefits of Loosely Coupled Code

Well-structured codebases yield big productivity wins through:

• Increased code clarity and focus
• Improved maintainability and testing
• Greater reusability
• Enhanced scalability and performance
• Reduced bugs from cascading changes

Decoupling requires more upfront effort. But saves exponentially more down the road. Investing in clean architecture accelerates developing and upgrading apps.

Key Takeaways

• Tight coupling hurts productivity through poor reuse, testing, and agility
• Custom hooks, HOCs and redux help decouple business logic from UIs
• Aim for high cohesion within components, loose coupling between
• Refactor when you see duplicated logic, tangled files, etc
• Loosely coupled code reduces technical debt and maintenance

With techniques like hooks, HOCs and redux, you can build resilient, scalable React codebases that stand the test of time.