FunHooks

Hooks for functions.

If you are a fan of React hooks and want to use them everywhere, this is the package for you.

Disclaimer - this is a WIP. Don't use it in production. do use it to figure out what can be done.

This project is an exploration for what if we could use hooks in functions. It is a proof of concept and not meant to be used in production. The motivation for this is coming from the opposite side of stop using too many hooks inside React components.

What's in the box?

API

• useFun - a hook that allows you to use hooks in functions

• useState - a hook that allows you to create contextual state in functions

• useEffect - a hook that allows you to use effects in functions (effects run on the microtask queue)

• useMemo - a hook that allows you to use memoization in functions

• useRef - a hook that allows you to create refs in functions

• useContext - a hook that allows you to use context value in functions

• useCallback - helper hook that allows you to use memoize functions

• createContext - a function that allows you to create a context

• mount - a function that allows you to mount a scope for a function

• autoMount - same as mount but waits for all suspended functions to resolve

Functionality

• Composition - compose functions like components
• Suspense - suspend a function until all its dependencies are resolved

How does it work?

The basic idea is that you can mount a "scope" on a key, which can be any valid WeakMap key, and then use hooks in that scope. for suspend to work you need to pass a fallback value to useFun and then use autoMount to wait for all suspended functions to resolve. This is not the ideal solution and it's not the final API, but it's a start.

What's currently working?

Mount a function into a key and use hooks in it.

import { useState, useEffect, mount } from "funooks";

function Demo(number) {
  const [state, setState] = useState(0);
  console.log(state);
  return setState;
}

const key = {};

const setState1 = mount(Demo, [1], key); // not passing a key will use a global Symbol
const setState2 = mount(Demo, [1], key);

assertEquals(setState1, setState2); // true

With different keys, the scopes are not the same

const key1 = {};
const key2 = {};

const setState1 = mount(Demo, [1], key1);
const setState2 = mount(Demo, [1], key2);

assertEquals(setState1, setState2); // false

Components with useFun and useRef

import { useState, useMemo, useEffect, useRef, mount } from "funooks";

function Component(number) {
  return useMemo(() => thisIsExpensive(number), [number]);
}

function Demo() {
  const [count1, setCount1] = useState(10);
  const [count2, setCount2] = useState(20);
  const value1 = useFun(Component, [count1], useRef());
  const value2 = useFun(Component, [count2], useRef());

  console.log(value1, value2);

  return {
    setCount1,
    setCount2,
  };
}

const { setCount1, setCount2 } = mount(Demo, []);

What's missing (currently)?

API

• useReducer - soon to be implemented
• useImperativeHandle - not sure if it's needed

Functionality

• unmounting - the next in queue to be implemented
• prevent re-rendering
• live model updates
• aborting

Docs

• context
• tests as examples
• what is mount key
• how to use the returned value
• useFun - how to use it with refs
• direct function calls vs useFun
• suspense - how it behaves with fallbacks

FAQ

Do I need React?

No, you don't. This package is not tied to React in any way. It just uses the same React's hooks API.

Is this a joke?

No, it's not. It's a serious package that allows you to use hooks in functions.

Should I use this?

No, you shouldn't. This is a joke package.

How to contribute?

Try to create interesting cases that will justify the existence of this package. If you have any ideas, please open an issue.