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

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

Building Levelo JS forced me to solve a hard problem. I needed a reactive state system.

My first plan felt like React. I wanted developers to access state values directly. I planned to use a getter and setter system. On paper, it looked easy. In practice, it was hard.

The framework must track three things:

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

Managing these tasks without adding mess is difficult. I spent time fighting the complexity.

I stopped chasing a perfect solution. I decided to build a working MVP instead. I tried 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 better. It is closer to SolidJS than React. It makes the code cleaner. It makes debugging faster.

I used AI to test different ideas during this process. I did not want to copy others. I wanted to understand how reactivity works under the hood.

This project taught me a lesson. Your first idea is not always the best idea. Many developers waste time on perfect solutions. A simple solution moves your project forward faster.

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

If you build a library, choose the simple path first. You can improve it later.

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