Next.js Discord

Discord Forum

useEffectEvent

Unanswered
Affenpinscher posted this in #help-forum
Open in Discord
AffenpinscherOP
I still get an error that says "React Hook useEffect has a missing dependency: 'onTick'. Either include it or remove the dependency array", even though I am using useEffectEvent so that I don't have to include whatever is inside it in the Effect's dependency.

The code:

import { useState, useEffect } from 'react';
import { useEffectEvent } from 'react';

export default function Timer() {
const [count, setCount] = useState(0);
const [increment, setIncrement] = useState(1);

const onTick = useEffectEvent(() => {
setCount(c => c + increment);
});

useEffect(() => {
const id = setInterval(() => {
onTick();
}, 1000);
return () => {
clearInterval(id);
};
}, []);

return (
#Unknown Channel
<h1>
Counter: {count}
<button onClick={() => setCount(0)}>Reset</button>
</h1>
<hr />
<p>
Every second, increment by:
<button disabled={increment === 0} onClick={() => {
setIncrement(i => i - 1);
}}>–</button>
<b>{increment}</b>
<button onClick={() => {
setIncrement(i => i + 1);
}}>+</button>
</p>
</>
);
}

2 Replies

I think eslint-config-next includes old version of eslint-plugin-react-hooks.
@LucetTin5 I think `eslint-config-next` includes old version of `eslint-plugin-react-hooks`.
AffenpinscherOP
It somehow started working even if I did nothing.