React hooks

Evt let you work with events in react without having to worry about cleaning up afterward.

useEvt()

import { useState } from "react";
import { Evt } from "evt";
import { useEvt } from "evt/hooks";

const evtTick = Evt.create();

setInterval(()=> evtTick.post(), 1000);

function App(){

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

    useEvt(ctx=> {
    
        evtTick.attach(ctx, ()=> setCount(count+1));
    
    },[count]);
    
    return <h1>tick count: {count}</h1>;

}

Run it

The core idea is to always use the ctx to attach handlers. This will enable EVT to detach/reload handlers when they need to be namely when the component is unmounted or a value used in a handler has changed.

useRerenderOnStateChange()

import { useState } from "react";
import { Evt } from "evt";
import { useRerenderOnStateChange } from "evt/hooks";

const evtTickCount = Evt.create(0);

setInterval(()=> evtTickCount.state++, 1000);

function App(){

    useRerenderOnStateChange(evtTickCount);
    
    return <h1>tick count: {evtTickCount.state}</h1>;

}

ESLint

You can use this react-hooks/exhaustive-deps to be warned if you forget a dependency:

//package.json (if you use create-react-app otherwise use .eslintrc.js) 
{
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ],
    "rules": {
      "react-hooks/rules-of-hooks": "error",
      "react-hooks/exhaustive-deps": [
        "error",
        {
          "additionalHooks": "(useEvt)"
        }
      ]
    }
  }
}