Esor Hooks

State and Reactivity Hooks

signal(initialValue)

Fundamental hook for creating reactive states.

import { signal } from "esor";

// Basic use
const count = signal(0);

// Read value
console.log(count);

// Set new value
count(1);

// Update based on previous value
count(count() + 1); //correct

count((prev) => prev + 1); //wrong

WARNING

To update the signal you must pass the getter: jscount(count() + 1), or directly the value jscount(1), this will be displayed as a String: jscount((prev) => prev + 1); unlike others.

computed(fn)

It creates a computed signal that is automatically updated when its dependencies change.

import { signal, computed } from "esor";

const count = signal(0);
const doubled = computed(() => count * 2);

// or just do:
const doubled = () => count * 2;

// `doubled` will be updated automatically when count is changed.

Effects Hooks

onEffect(fn)

Executes side effects that are synchronized with state changes.

import { onEffect } from "esor";

onEffect(() => {
  // This code is executed when dependencies change.

  // Optional: return cleaning function
  return () => {
    // Cleanup
  };
});

Memorization Hooks

memo(fn, deps)

Memorizes a calculated value and only recalculates it when dependencies change.

import { memo } from "esor";

const memoizedValue = memo(() => computeExpensiveValue(dep), [dep]);

Reference Hooks

ref()

Creates a mutable reference that persists between renderings.

import { ref } from "esor";

const ref = ref();
// Access the current value
console.log(ref.current);

Event Hooks

emit(name, detail)

Hook to emit custom events.

import { emit } from "esor";

const event = emit("custom-event", {
  data: "some data",
});

Utility Hooks

batch(fn)

Batches multiple status updates into a single update.

import { batch } from "esor";

batch(() => {
  setCount(count + 1);
  setName("John");
  // It will only cause an update
});