EVT
Home
GitHub
Search…
Why EVT ?
Overview
API Documentation
React hooks
Extending Evt
Powered By
GitBook
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!
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()
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
You can use this
react-hooks/exhaustive-deps
to be warned if you forget a dependency:
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!
Previous
Handler<T, U> (type)
Next
Extending Evt
Last modified
30d ago
Copy link
Contents
useEvt()
useRerenderOnStateChange()
ESLint