Cuek

Introduction

[⚠️ WARNING] Early Development Notice: Cuek is a highly experimental project currently in early development. The APIs can and will break fast without warning. Oh, and this library, along with the documentation you are reading right now, was built mostly by an AI. Proceed accordingly.

Cuek is a hyper-minimalist JSX library for developers who are officially done with the reactivity circus. We stripped away the magic, the proxies, and the “why is my component rerendering 50 times?” headaches.

The Reactivity Trap

Every “modern” JS framework is obsessed with one thing: Reactivity. They promise to make your life easier by syncing your state to your UI. Sounds great, right?

The reality is a nightmare. Reactivity makes it easy to update a list, but it makes it a total pain to manage your actual data.

In React, you have to wrap your life in hooks. useState, useEffect, useCallback… it never ends. You end up spending more time fighting the framework’s rules than actually writing your app. Then, because the magic is too confusing, you install a massive state management library to try and fix the the mess the framework made in the first place.

The Cuek Way

Cuek is different because we simply stop caring about reactivity. We trade the “magic” for absolute control.

  • No magic hooks: You want a variable? Use let.
  • Plain JavaScript: It’s just code. No proxies. No observers.
  • Explicit updates: You change the data, then you call ctx.rerender(). You are the boss.

Every React developer has done it. You have reached for that one pattern in a moment of pure desperation. If you have ever felt dirty for using a “force update” in React to fix a bug, welcome home. Cuek is built on that exact feeling.

In React, you have to do this embarrassing dance just to refresh the UI manually:

// The React "I give up" pattern
const [, forceUpdate] = useReducer(x => x + 1, 0);

const handleUpdate = () => {
  someGlobalCounter++;
  forceUpdate(); // Gross.
};

In Cuek, explicit updates are the first-class residents. No hacks required.

function Counter({}, ctx) {
  // Look at this. A normal variable. No hooks. No sadness.
  let count = 0;

  return () => (
    <div>
      <p>Count: {count}</p>
      {/* You change the data, then you tell Cuek to update. Explicit. Brutal. */}
      <button
        onclick={() => {
          count++;
          ctx.rerender();
        }}
      >
        Increment
      </button>
    </div>
  );
}

Why keep JSX?

We think React was right about one thing: JSX.

JSX is the best way to describe a UI in JavaScript, period. We kept the beautiful syntax but ripped out the bloated engine underneath. Now you can write expressive components without feeling like you’re carrying a 100lb framework on your back.

What is with the name?

You might be wondering where the name Cuek comes from. It comes from an Indonesian slang word that translates roughly to indifferent, unbothered, or ignoring the noise.

In React, the UI stresses out over every state change. Cuek just sits there. It is completely unbothered by your data updates until you explicitly tell it to move. It’s the UI library that doesn’t care until you tell it to.

Next Installation