batis

General reactive JavaScript programming using the idea of React Hooks.

Introduction

Even though React Hooks are actually a constrained solution for using state and managing side effects in functional stateless components, they have proven to be very elegant in their design. I wanted to use this kind of reactive programming in areas other than React development, so I wrote Batis.

Batis essentially revolves around the concept of a Hook and its host. Running a functional stateless Hook requires a host that manages the state and effects and reports asynchronous state changes that should result in a new run.

Installation

npm install batis

Usage

import {Host, useEffect, useLayoutEffect, useMemo, useState} from 'batis';

function useGreeting(salutation) {
  const [name, setName] = useState(`John`);

  useLayoutEffect(() => {
    setName(`Jane`);
  }, []);

  useEffect(() => {
    // Unlike React, Batis always applies all state changes, whether
    // synchronous or asynchronous, in batches. Therefore, Janie is not
    // greeted individually.
    setName(`Janie`);
    setName((prevName) => `${prevName} and Johnny`);

    const handle = setTimeout(() => setName(`World`), 0);

    return () => clearTimeout(handle);
  }, []);

  return useMemo(() => `${salutation} ${name}!`, [salutation, name]);
}

const greeting = new Host(useGreeting);

console.log(greeting.run(`Hi`));
console.log(greeting.rerun());

greeting.reset();

console.log(greeting.run(`Bye`));
console.log(greeting.rerun());

await greeting.nextAsyncStateChange;

console.log(greeting.run(`Hello`));

[ 'Hi Jane!', 'Hi John!' ]
[ 'Hi Janie and Johnny!' ]
[ 'Bye Jane!', 'Bye John!' ]
[ 'Bye Janie and Johnny!' ]
[ 'Hello World!' ]

API reference

The React Hooks API reference also applies to this library and should be consulted.

Implementation status

Below you can see the subset of React Hooks implemented by Batis:

| React Hook | Status | | -------------------------------------------- | ----------------- | | useState | ✅Implemented | | useEffect | ✅Implemented | | useLayoutEffect | ✅Implemented | | useMemo | ✅Implemented | | useCallback | ✅Implemented | | useRef | ✅Implemented | | useReducer | ✅Implemented | | useContext | ❌Not implemented | | useImperativeHandle | ❌Not implemented | | useDebugValue | ❌Not implemented |