Luciano0322

Posted on Jun 22

When Render No Longer Owns the Entire Data Flow

#architecture #frontend #javascript #webdev

In frontend development, it is very easy to think of data flow and rendering as the same thing. After all, for most applications, the final goal is to display data on the screen. Data comes back from an API, gets written into state, the component re-renders, and the UI updates.

This path is so familiar that we often unconsciously assume:

The purpose of data changes is to trigger render.

But as an application scales, this assumption begins to crack. Data flow does not exist exclusively to serve the UI. In a complex system:

Some data changes simply update derived state.
Some trigger background tasks.
Some synchronize local caches.
Some orchestrate async resources.
Some happen entirely under the hood, with no need for the UI to ever know.

When every piece of data is forced to route back through a component—tangled up in render lifecycles, hooks, watchers, or effects—the architecture inevitably turns into a mess. This isn’t a flaw in React or Vue. It happens because, fundamentally, render was never meant to own the entire data flow.

Render Is a Consumer of Data Flow, Not the Owner

Over time, I've come to deeply embrace this mindset:

Render is just one side effect.

This sentence deeply changed the way I think about frontend architecture, because it reframes the core problem.

Render is, of course, extremely important. Without render, there is no visible output for the user. But from the perspective of a reactive system, render should never be the center of the data flow. It is only one possible side effect produced by data changes.

When a piece of data changes, the system may trigger a chain of reactions:

source state changes
        ↓
derived state updates
        ↓
effects run
        ↓
render may happen
        ↓
async work may continue

Render is one result of the system.
It is not the owner of the system.

However, many frontend architectures and usage patterns make us unconsciously treat render as the ownership boundary of data flow.

For example, in React, we often store data inside component state, then use useMemo, useEffect, and useCallback to manage derived data and side effects.

In Vue, the reactivity system is more fine-grained, but if the application’s data flow still revolves heavily around component scope, watch, watchEffect, or template consumption, data ownership can still become scattered.

This is not about whether a framework is capable or not.

It is about where the center of architectural thinking is placed.

Frameworks usually care about this question:

When should the UI update?

But when I was designing signal-kernel, the question in my mind was different:

After data changes, who should own the update logic?

These two questions may look similar, but they are fundamentally different.

Why Components Should Not Carry All Data Flow Responsibilities

Components are great at describing UI. They are good at composing views, receiving props, handling events, and presenting state.

But they are not ideal ownership boundaries for the entire data flow. This isn't obvious when your state is simple, but once derived state and async state start piling up, components are quickly crushed under responsibilities they were never meant to hold.

Consider a common flow like this:

userId changes
  → fetch user profile
  → fetch permissions
  → compute available actions
  → update form visibility
  → trigger validation
  → maybe render

If this entire flow is placed inside a component, it often becomes something like this:

useEffect fetch data
useMemo compute derived state
useEffect sync another state
useEffect trigger validation
conditional render

At first, this may still look acceptable. But as requirements grow, the component slowly turns into a data-flow scheduler.

It no longer only describes the UI. It also has to decide:

Who depends on whom?
Who should update first?
Which values can be recomputed?
Which side effects are allowed to run?
Which async work needs to be cancelled?
Which state must not drift?

At this point, the responsibility of the component has already gone far beyond render. And the most troublesome part is that these dependencies are usually not explicit. They are hidden inside hooks, watchers, callbacks, and dependency arrays.

The system may still work on the surface, but the ownership of the data flow has been shattered.

The Boundary Problem of Derived State

Derived state is where this architectural leak is most glaring. By derived state, I simply mean data that can be programmatically inferred from other data:

cartItems → totalPrice
userRole + permissions → availableActions
searchKeyword + filters + rawList → visibleList

Ideally, these are just nodes in a reactive graph. When source state changes, the derived state naturally marks itself as stale and recomputes only when necessary.

But in a render-centric codebase, these derivations are trapped inside components through useMemo, computed, or similar component-scoped mechanisms. This is fine in isolation. This is fine in isolation. The ownership boundary starts to blur, however, when that derived state is needed by an async task, a cache, or a business rule outside the UI layer.

Suddenly, state that looks like it belongs to the UI is actually carrying the weight of domain logic. This is the exact ambiguity of ownership I keep emphasizing.

It's About Ownership, Not Performance

When people talk about signals or fine-grained reactivity, the first thing that usually comes to mind is performance.React re-renders; Solid updates the DOM directly; Vue tracks dependencies precisely; Signals bypass unnecessary recomputations.

These are real, practical benefits. But over time, I’ve realized that performance is just the most visible byproduct. The actual paradigm shift is ownership.

Render-centric model: The UI owns the data flow. Data mutations must pass through the UI lifecycle (hooks, component scopes) before they can be organized, derived, and synchronized.
Graph-centric model: The reactive graph owns the data flow. Events trigger signals, signals derive a computed graph, and effects, resources, and renders are all simply downstream consumers.

This realization became my North Star while building signal-kernel. I wasn't trying to write another UI framework, nor was I trying to prove React or Vue wrong. I just wanted to answer one question:

If render is no longer the center of data flow, who should take over?

My answer is the reactive graph.

Let Render Return to Its Proper Position

When the reactive graph takes over, render is drastically simplified. It doesn't need to know how data is derived, it doesn't orchestrate update orders, and it doesn't juggle async consistency. It just reads the state it cares about and paints the screen.

This isn't about downplaying the importance of the UI. It’s about letting the UI return to what it's actually good at. In this model, the boundaries are strict:

Signal owns the source state.
Computed owns the derived state.
Resource owns the async state.
Effect owns the side effects.
Render owns the visual output.

By extracting data flow from the render lifecycle, we give data its own independent ownership boundary. This is the core semantic philosophy behind signal-kernel.

What This Means for React and Vue

For React developers, this pain point is acute. Because React is fundamentally render-driven, data-flow issues inevitably turn into interrogations about useState, useMemo, useEffect, dependency arrays, and re-render optimization. This is exactly why large React codebases suffer from dependency array fatigue, stale closures, and effect overuse.

For Vue, the situation is more nuanced. Vue already has a built-in reactivity system; ref, computed, and watch describe data dependencies beautifully. A Vue developer reading this might think: "Isn't Vue doing this already?"

To an extent, yes. Vue brought reactive graphs into mainstream application development much earlier. But there is a key distinction: Vue’s reactivity can be used independently, but its primary design context is still the Vue application model.

What signal-kernel explores is a framework-agnostic reactive graph. I'm not asking, "Should we use signals to update Vue components?" I'm asking, "Can we build a standalone data core that React, Vue, background jobs, async runtimes, and even AI agents can all consume simultaneously?"

That’s why the React and Vue adapters for signal-kernel are intentionally thin. A framework adapter shouldn't seize control of the data flow; it should merely bridge the graph to the UI.

A System You Can Actually Reason About

When render relinquishes control, you don't just get better performance—you get a system you can actually reason about. You stop asking framework-specific syntax questions and start asking architectural ones:

Is this source state or derived state?
Is this a synchronous derivation or an async result?
Is this a data-layer effect or a UI-layer effect?
Should this state live inside the component, or inside an independent reactive graph?

Conversely, when everything is pushed back into the component lifecycle, profound architectural flaws are disguised as hook usage questions:

How do I write this dependency array?
Why is this useEffect firing twice?
Should I wrap this in useMemo?
Is watchEffect too automatic?

These questions all have technical answers, but they mask the deeper, underlying problem:

Who is actually supposed to own this piece of the data flow?

Downgrading Render Into One of Many Outputs

UI frameworks are incredibly important. React, Vue, and Solid have all solved very difficult problems in their own dimensions.

But in complex frontend applications, we need to recognize one thing:

Render should no longer be treated as the only center of data flow.

Only when data flow has its own ownership can a system move from UI-driven state management toward graph-driven state ownership.

On the surface, signal-kernel is a signal library. But at its core, it is an exploration of how frontend data architecture can be rebuilt when render steps back and becomes just one kind of side effect.

In the next article, I will continue breaking down this problem:

When state, derived state, and effect are mixed together, how does a system gradually lose its boundaries?

DEV Community