𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗥𝗲𝗮𝗰𝘁𝗶𝘃𝗲 𝗦𝘁𝗮𝘁𝗲 𝗦𝘆𝘀𝘁𝗲𝗺 𝗶𝗻 𝗣𝘂𝗿𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

𝗛𝗼𝘄 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗔 𝗥𝗲𝗮𝗰𝘁𝗶𝘃𝗲 𝗦𝘁𝗮𝘁𝗲 𝗦𝘆𝘀𝘁𝗲𝗺 𝗶𝗻 𝗣𝘂𝗿𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁

I built Levelo JS. One of my biggest tasks was creating a reactive state system.

Initially, I wanted it to work like React. I wanted developers to access state directly. I planned to use a getter and setter system. On paper, it looked easy.

In practice, it was hard.

The system must track three things:

• When a value is read.
• When a value changes.
• Which UI parts depend on that value.

Managing these tasks without adding complexity was difficult. I realized my original plan was too complex for an MVP.

I stopped chasing perfection. I switched to a function-based approach.

The new API looks like this:

import { state } from 'levelojs';

function Counter() { const [count, setCount] = state(0);

return ( // UI ); }

This design works like SolidJS. It is simpler to build and easier to understand. It also makes debugging faster.

I used AI to test different ideas during this process. My goal was not to copy others. I wanted to learn how reactivity works under the hood.

This project taught me a lesson. Your first idea is not always the best idea.

Developers often waste time looking for a perfect solution. A simple solution moves your project forward faster.

I might try the direct getter approach again later. For now, the function-based API is the right choice for my MVP.

Reactivity is not magic. It is the result of design and problem solving.

If you build a library, start with the simplest version. You can improve it later.

Source: https://dev.to/motionmind2007/how-i-built-a-reactive-state-system-in-pure-javascript-1lj