Repository files navigation

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!

useUpdateuseAuto don't need anything likedeps, their dependencies are automatically knew. And only when dependencies change, they execute again.

Yes, that is to say, you can get rid of Hooks,useCallbackuseMemodepsmemo, they're unnecessary anymore.

pnpm add solid-react# oryarn add solid-react# ornpm i solid-react

import{useSignal}from'solid-react';const[count,setCount]=useSignal(0);constcountDisplay=<div>{count()}</div>;

Returns a getter and a setter. (likecreateSignal)

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. (likecreateEffect)

import{useAuto}from'solid-react';constvalue=useAuto(()=>computeExpensiveValue(a(),b()));value();

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

import{useMount}from'solid-react';useMount(()=>console.log('mounted'));

Register a method that runs after initial render. (likeonMount)

import{useCleanup}from'solid-react';el.addEventListener(event,callback);useCleanup(()=>el.removeEventListener(event,callback));

Register a cleanup method that runs when unmount. (likeonCleanup)

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.