惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
阮一峰的网络日志
阮一峰的网络日志
博客园 - 聂微东
F
Fortinet All Blogs
H
Help Net Security
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
D
DataBreaches.Net
MyScale Blog
MyScale Blog
B
Blog
I
InfoQ
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
GbyAI
GbyAI
Google DeepMind News
Google DeepMind News
IT之家
IT之家
The GitHub Blog
The GitHub Blog
有赞技术团队
有赞技术团队
博客园_首页
L
LangChain Blog
V
V2EX
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
T
The Blog of Author Tim Ferriss
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Microsoft Azure Blog
Microsoft Azure Blog
博客园 - Franky

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
When Render No Longer Owns the Entire Data Flow
Luciano0322 · 2026-06-22 · via DEV Community

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:

  • cartItemstotalPrice
  • userRole + permissionsavailableActions
  • searchKeyword + filters + rawListvisibleList

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?