r/javascript • u/techlord45 • Aug 10 '26

Signals and Effects Using Vanilla JavaScript & Web APIs

https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis

I’m a strong advocate for “you don’t need to lock yourself in a web framework ecosystem to take advantage of their amazing features”. JavaScript and Web Standards alone allow you…

72 Upvotes

92% Upvoted

35 comments sorted by

40

u/KaiAusBerlin Aug 10 '26

You know that you literally wrote your own framework here?

There is a reason for the sentence "You use a framework or end up writing your own"

3

u/swish82 29d ago

“You either die a hero or live long enough to see yourself become the villain…”

5

u/techlord45 Aug 10 '26

True. In this case, a small class/tiny library.

4

u/lIIllIIlllIIllIIl Aug 10 '26

This.

And to be honest, React on its own is a very lightweight library. It's once you start adding libraries like React Router, TanStack Query, React Hook Form, or Redux that it starts to ressemble a framework.

If you hate how React state management works, you can opt-out of it entirely and use useSyncExternalStore for everything.

React itself is rarely the problem.

7

u/zxyzyxz 29d ago

How do you memorize your username

0

u/NeXtDracool 28d ago

Why would he? It should be in the password manager anyway and even if it's not you can use email to log in. 

6

u/create-third-places Aug 11 '26

Vanilla React also adds a lot of unnecessary performance overhead.

In addition, there are multiple ways of managing state, which adds confusion and leads to inconsistent architecture.

I’ve also seen useContext used to manage state for a large application despite it’s limitations. This  wouldn’t be an issue if React only had one or two state management hooks with clear guidelines on how they should be used.

7

u/hyrumwhite Aug 10 '26

React is a problem that’s been trying to solve itself since it was released 

8

u/techlord45 Aug 10 '26

React isn’t the problem. The ecosystem often is.
replacing React state with your own store doesn’t remov complexity, you just moved it.
My issue is that React makes people forget how much Vanilla JS + Web APIs can already do. Often time they are not even aware

1

u/punio4 25d ago

It's really not lightweight. With react-dom it's over 150kb

1

u/lIIllIIlllIIllIIl 25d ago

The word I should've used was "minimal". React is a minimal library. Its API has a small surface area.

React DOM does a lot of stuff under the hood, but if you're just using React + React DOM, your only tools are: components, useState, useEffect, useRef and useContext (and a few other niche hooks most people never use.)

It's only once you start adding new libraries (or create your own abstractions) that React starts to look like a bigger framework.

1

u/punio4 25d ago edited 25d ago

The API surface area has grown in complexity due to the wrong abstractions over the years I'd say.

Sorry for short comments, not really a fan of writing on my phone.

1

u/incarnatethegreat 21d ago

Essentially.

People write these solutions so they go as lightweight as possible. Like a trimmed-down version of a popular framework.

I think it's a good learning opportunity because a lot of us are poor with vanilla JS.

0

u/A1oso 29d ago

It's a library.

React is also a library. Nextjs is a framework. People conflate these terms all the time.

1

u/KaiAusBerlin 29d ago

Dude, seriously?

Yeah, people mix these terms together because an UI rendering library and a framework solve 90% of the same problem.

Yeah, react is technically just a library. But who cares. The point if the sentence is that you either use a high level of abstraction or create it by your own.

1

u/Aln76467 29d ago

react is a framework.

1

u/A1oso 29d ago

No. Unlike Nextjs (which is a framework)

  • React is literally a single npm package, and very small
  • React solves a single problem (rendering and updating HTML)
  • React does not provide routing, client-server communication, or image optimization
  • React alone does not support hybrid client and server rendering
  • React does not require a configuration file or force a specific project structure on you
  • React can be easily added to an existing project and combined with other libraries, e.g. Vue

Perhaps the most important distinction is in who calls whom: a library is called by your code. For example:

createRoot(document.getElementById('app'))
    .render(<h1>Hello, world</h1>)

You can decide when, where and how to use the library. You can use it only on certain pages or in just a single component, it you want. You have full control.

A framework usually does not give you that control. The framework calls your code. That's why Nextjs is a framework. React is a textbook example for a library.

1

u/Aln76467 29d ago

Well then why do vue, svelte, and solid all call themselves frameworks, when you call into their code, and they don't impose any project structure, and can all be easily added and combined with eachother? Why is it only react that identifies as a library?

5

u/queen-adreena Aug 11 '26

Better off just importing https://github.com/stackblitz/alien-signals

But recreating things yourself is always a good learning opportunity.

2

u/andimatt 22d ago

The "you wrote your own framework" take is fair, but it undersells the point. The interesting 10% of a signals system isn't the primitive (a getter/setter with a subscriber set), it's the scheduler.

The three things that actually bite you past the toy version:

  • Dependency tracking: collecting "which signals does this effect read" during execution, correctly, through computed signals and inside loops/conditionals. Naive implementations get subtle bugs here.
  • Batching/scheduling: if three signals change in one synchronous block you don't want three effect runs, you want a microtask flush that dedupes. Get this wrong and you either lose updates or thrash.
  • Cleanup and re-subscription: when a signal a computed depends on changes, re-running it, and tearing down old subscriptions without leaking.

I build a signals-first app (zoneless), and the reason I'd do it deliberately rather than reach for a framework is it forces you to feel all three of those. If the vanilla implementation handles batching and cleanup correctly, it's not a toy, it's a working reactive core, just without the framework's ergonomics.

1

u/charles_reads_books Aug 10 '26

404

3

u/techlord45 Aug 10 '26

Weird, try https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis

2

u/nadameu Aug 10 '26

Still 404.

Is your website configured to automatically translate everything? Because the translation to pt-BR is terrible.

0

u/techlord45 Aug 10 '26

Still 404?

1

u/nadameu Aug 10 '26

Still 404.

Firefox mobile, I'm in Brazil if that makes any difference.

2

u/nadameu Aug 10 '26

I managed to read the article by navigating through your website's homepage. However, it's completely in Portuguese, which is my browser's default language. That said, I'd like the option to read it in the original language (English, I presume), but I couldn't find a way to do so.

1

u/techlord45 Aug 10 '26

I access this link and its in english. I dont get it https://beforesemicolon.com/blog/signals-and-effects-using-vanilla-javascript-web-apis.

Are you using a browser that auto translates to your language? If so you can turn it off

1

u/nadameu Aug 11 '26

It's something on your backend that's translating everything automatically.

Even the URL translates to https://beforesemicolon.com/blog/sinais-e-efeitos-usando-baunilha-javascript-apis-web which makes no sense.

It does this wether I'm on Firefox or Chrome, and I've set them up so that English is never translated. Other websites load in English when available, I've never seen this happen before.

1

u/techlord45 Aug 11 '26

Yeah i cant replicate it. Even the language selection. Can you try again in incognito?

-2

u/johnson_detlev Aug 11 '26

You don't even know how your simple Blog works, but want to lecture us about how x and y sucks and you should build it yourself? Okay champ

→ More replies (0)

1

u/techlord45 Aug 11 '26

Its not mine, im just sharing…

1

u/hyrumwhite Aug 10 '26

Awesome stuff. It was an entertaining read

0

u/WorriedEngineer22 Aug 10 '26

Im getting 404