Signals and Effects Using Vanilla JavaScript & Web APIs

Photo by Milan De Clercq on Unsplash

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 to replicate anything independently using Web APIs.

You are probably familiar with React useState and useEffect APIs.

const [count, updateCount] = useState(0);

useEffect(() => {
  console.log(count);
}, [count])

updateCount(10);

Or SolidJs createSignal and createEffect APIs.

const [count, updateCount] = createSignal(0);

createEffect(() => {
  console.log(count());
})

updateCount(10);

They are both amazing ways to allow you to define reactive data that you can create side effects around and that integrate well with DOM rendering. In both libraries, you can use these states directly in JSX which is then compiled to HTML allowing the DOM to update whenever they change.

<p>Count: {count}</p> 

Because all these libraries require you to compile code to get the final JavaScript and HTML, they turn me off completely.

There is currently a proposal to bring signals to JavaScript but until then, let me show you a way to get these using JavaScript and widely available web API.