Forem: Bruno Xavier

Organizing a Legacy React Project Without Blocking Delivery

Bruno Xavier — Mon, 30 Mar 2026 00:23:59 +0000

Rewriting everything from scratch often looks like the cleanest solution. In reality, it is usually the most expensive, slowest, and riskiest option. What consistently works in production environments is incremental refactoring driven by impact.

1. Diagnose before changing anything

Before reorganizing folders or introducing patterns, identify where the real cost is.

Common signals:

Components with 200–500+ lines
Business logic mixed with rendering
useEffect handling multiple responsibilities
Duplicated logic across the codebase
Implicit dependencies (scattered global state)

Without this mapping, refactoring becomes superficial.

2. Define a minimum standard and stop the bleed

Before fixing legacy code, prevent it from growing.

A simple baseline already improves consistency:

Components → UI only
Hooks → logic and state
Services → API communication

Rule: new code must follow the standard, even if old code does not.

3. Structure by feature, not by type

Legacy projects often use a “by type” structure (components/, utils/, etc.), which increases coupling.

A feature-based structure scales better:

src/
  features/
    users/
      components/
      hooks/
      services/
    dashboard/
  shared/
    components/
    hooks/
    utils/
  app/
    routes/
    providers/

This reduces cross-dependencies and improves ownership by domain.

4. Incremental refactoring (the only viable strategy)

Avoid large, batch refactors. The risk rarely justifies the cost.

Effective approach:

If you touch code → improve that part
If you see duplication → extract it
If logic is mixed → move it into a hook

Small, continuous improvements compound over time.

5. Separate responsibilities clearly

One of the main issues in legacy code is mixed responsibilities.

Typical example:

function Dashboard() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  function processData() {
    // complex logic
  }

  return <div>{/* UI + logic */}</div>
}

Refactored:

// hook
export function useDashboardData() {
  const [data, setData] = useState([])

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])

  return { data }
}

// component
function Dashboard() {
  const { data } = useDashboardData()
  return <DashboardView data={data} />
}

The gain is not aesthetic—it is lower coupling and higher predictability.

6. Centralize side effects

Legacy projects often suffer from duplicated requests and inconsistent state.

Standardizing with tools like React Query (TanStack) or SWR provides:

Automatic caching
Data synchronization
Less manual useEffect logic

Result: fewer bugs and less boilerplate.

7. Test where it matters

Full coverage in legacy systems is rarely efficient.

Prioritize:

Hooks (business logic)
Services (rules and integrations)

Lower priority:

Pure UI components

8. Strategy comparison

Conclusion

Organizing a legacy React project is not about achieving perfect architecture. It is about continuously reducing complexity without stopping delivery.

Clear separation of responsibilities, feature-based structure, and incremental refactoring consistently deliver the best results with the lowest risk.

Over time, this transforms unpredictable code into a system that is easier to maintain, test, and scale.

The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update

Bruno Xavier — Fri, 27 Mar 2026 01:10:43 +0000

The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update

If you've used Vue.js, you've probably experienced that "wow" moment: you change a variable and the UI updates automatically. No setState, no massive useEffect chains, no manual subscriptions. It feels like magic.

But it's not magic — it's a beautifully engineered reactivity system. And behind that simplicity lies one of the most interesting technical implementations in modern frontend frameworks.

What Makes Vue's Reactivity So Special?

Unlike React, which relies on Virtual DOM diffing and explicit hooks, Vue 3 uses native JavaScript Proxies (ES6) to create automatic dependency tracking.
Here's the trick in simple terms:

When you read a reactive property (e.g. count.value), Vue secretly registers that the current effect (component render, watcher, or computed) depends on it.
When you change that property, Vue only notifies the effects that actually depend on it.

This is called fine-grained reactivity — surgical updates without re-rendering entire components unnecessarily.

Practical Example with ref() and reactive()

vue<script setup>
import { ref, reactive, watchEffect } from 'vue'

// ref() is used for primitives or when you want .value
const count = ref(0)

// reactive() turns the entire object into a Proxy
const state = reactive({
  user: {
    name: 'Bruno',
    level: 42
  }
})

// watchEffect runs immediately and tracks dependencies automatically
watchEffect(() => {
  console.log(`User ${state.user.name} is at level ${state.user.level}`)
  console.log(`Counter: ${count.value}`)
})

// Reactive changes
setTimeout(() => {
  count.value++                    // only updates what depends on count
  state.user.level += 10           // only updates what depends on level
}, 1000)
</script>

Notice something? We didn’t have to tell Vue what to watch. It figured it out by itself.

The Curiosity Behind the Curtain

Vue’s reactivity system is so well isolated that you can actually use it standalone with the @vue/reactivity package — no Vue components required.
Internally:

reactive(obj) returns a Proxy that intercepts get and set operations.
While an "active effect" is running (component render, watchEffect, computed, etc.), every property read registers the current effect as a dependent.
Every write triggers only the relevant effects.

It’s a modern, automatic Observer Pattern that is incredibly efficient.

The Gotchas Every Vue Developer Discovers (Usually the Hard Way)

The magic isn’t perfect. Here are some interesting quirks:

1. reactive() only works with objects

JavaScript
const num = reactive(5) // ❌ Doesn't work! Use ref() for primitives

2. Destructuring breaks reactivity

JavaScript
const state = reactive({ count: 0 })
const { count } = state   // count is now a plain number!

count++ // ❌ This does NOTHING reactive!

Fix: Use toRefs() or always access via state.count.

Adding new properties after creation

JavaScript
const state = reactive({ name: 'Bruno' })
state.age = 30 // ✅ This works! Vue tracks property additions

However, operations like Object.assign() or delete can sometimes lose reactivity. Best practice: stick to direct property access or use shallowReactive when needed.
Why This Matters in 2026
With Vue 3.5+ bringing even better performance optimizations (especially for large arrays and reduced memory usage), understanding reactivity helps you write naturally performant code without excessive memoization.
It also makes composables incredibly powerful:

vue
<script setup>
// A reusable composable that automatically tracks dependencies
function useMousePosition() {
  const x = ref(0)
  const y = ref(0)

  // The watchEffect inside tracks dependencies automatically
  return { x, y }
}
</script>

Final Thoughts: Vue Makes Reactivity "Boringly Easy"

The biggest curiosity about Vue.js is how it took something complex (dependency tracking and optimized updates) and made it feel obvious.
You don’t have to think about when your component should update. You just declare your state, and Vue takes care of the rest — with elegance, great performance, and a surprisingly small bundle size.
If you're still using the Options API or transitioning to Composition API, take some time to play with watchEffect, shallowRef, and understand how Proxies work under the hood. The feeling of control is addictive.

What about you?
What was the biggest "magic moment" — or the most surprising gotcha — you’ve encountered with Vue’s reactivity system?
Drop it in the comments below! 👇

Forem: Bruno Xavier

Organizing a Legacy React Project Without Blocking Delivery

1. Diagnose before changing anything

2. Define a minimum standard and stop the bleed

3. Structure by feature, not by type

4. Incremental refactoring (the only viable strategy)

5. Separate responsibilities clearly

6. Centralize side effects

7. Test where it matters

8. Strategy comparison

Conclusion

The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update

The Magic (and Gotchas) of Vue.js Reactivity: How It Knows Exactly What to Update

What Makes Vue's Reactivity So Special?

Practical Example with ref() and reactive()

The Curiosity Behind the Curtain

The Gotchas Every Vue Developer Discovers (Usually the Hard Way)

** Final Thoughts: Vue Makes Reactivity "Boringly Easy"**

Final Thoughts: Vue Makes Reactivity "Boringly Easy"