Hooks for a SolidJS-like React

Turn React into SolidJS, update on demand, no more re-render.

☞ https://nanxiaobei.medium.com/turn-react-into-solidjs-update-on-demand-no-more-re-render-3230fe2f878c

Here is a demo, you can open the console, click the button to try, and you will find:

Components don’t re-render anymore, React is completely SolidJS-style on-demand updates!

useUpdate useAuto don't need anything like deps, their dependencies are automatically knew. And only when dependencies change, they execute again.

Yes, that is to say, you can get rid of Hooks, useCallback useMemo deps memo, they're unnecessary anymore.

pnpm add solid-react
# or
yarn add solid-react
# or
npm i solid-react

import { useSignal } from 'solid-react';

const [count, setCount] = useSignal(0);

const countDisplay = <div>{count()}</div>;

Returns a getter and a setter. (like createSignal)

import { useUpdate } from 'solid-react';

const [count, setCount] = useSignal(0);

useUpdate(() => console.log('count:', count()));

The callback runs at mount and when its dependencies change. (like createEffect)

import { useAuto } from 'solid-react';

const value = useAuto(() => computeExpensiveValue(a(), b()));

value();

Returns a computed value getter, re-compute when dependencies change. (like createMemo)

import { useMount } from 'solid-react';

useMount(() => console.log('mounted'));

Register a method that runs after initial render. (like onMount)

import { useCleanup } from 'solid-react';

el.addEventListener(event, callback);

useCleanup(() => el.removeEventListener(event, callback));

Register a cleanup method that runs when unmount. (like onCleanup)

import { Run } from 'solid-react';

<div>{Run(() => (a() ? b() : c()))}</div>;
<div>{Run(() => Object.keys(obj())).map((e) => e)}</div>;

A helper function for conditional operator or executions in jsx.