React hooks
Evt let you work with events in react without having to worry about cleaning up afterward.
useEvt()
1
import { useState } from "react";
2
import { Evt } from "evt";
3
import { useEvt } from "evt/hooks";
4
5
const evtTick = Evt.create();
6
7
setInterval(()=> evtTick.post(), 1000);
8
9
function App(){
10
11
const [count, setCount]= useState(0);
12
13
useEvt(ctx=> {
14
15
evtTick.attach(ctx, ()=> setCount(count+1));
16
17
},[count]);
18
19
return <h1>tick count: {count}</h1>;
20
21
}
Copied!
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()
1
import { useState } from "react";
2
import { Evt } from "evt";
3
import { useRerenderOnStateChange } from "evt/hooks";
4
5
const evtTickCount = Evt.create(0);
6
7
setInterval(()=> evtTickCount.state++, 1000);
8
9
function App(){
10
11
useRerenderOnStateChange(evtTickCount);
12
13
return <h1>tick count: {evtTickCount.state}</h1>;
14
15
}
Copied!
ESLint
1
//package.json (if you use create-react-app otherwise use .eslintrc.js)
2
{
3
"eslintConfig": {
4
"extends": [
5
"react-app",
6
"react-app/jest"
7
],
8
"rules": {
9
"react-hooks/rules-of-hooks": "error",
10
"react-hooks/exhaustive-deps": [
11
"error",
12
{
13
"additionalHooks": "(useEvt)"
14
}
15
]
16
}
17
}
18
}
Copied!
Last modified 30d ago
Copy link