Why didnt you wrap the inline count function within a useCallback hook?
Also using a state object withing the set method may cause an infinite loop if used within a use effect so you need to use the previous value.
And why not put the callback in the useEffect dependency array?
The function would then look like this:
function useInterval(callback,delay){
useEffect(()=>{
let id = setInterval(callback,delay)
return () => clearInterval(id)
},[delay, callback])
}
But youre still right about the refs. React needs to have the refs explicitly mentioned in the array of dependencies to keep track of changes.
I wonder if it is possible to use Solid within react and im curious if it would make things easier and better.
Edit:
Your approach is great. I actually learned something for future reference. You wrote the code in a way that the next dev who is using the useInterval function doesnt have to think about wrapping their callback function within a useCallback. Thanks!
I think his motivation was to solve this without using the function form of setState since he could have done that at the beginning of the article and moved on. In any case if you haven't read it, I highly recommend it.
I did make a react-solid-state library but it is basically like MobX. Pre-hooks it felt kind of cool, post-hooks I sort of lost interest in it. I thought React introducing its own primitives was a gamechanger and sure enough things like Recoil started showing up. React can never really leverage the benefits here in terms of execution performance and the DX is not amazing with the need for wrappers etc. There is probably a smarter way to approach it now but as I said limited benefits. Solid fully embraces fine-grained reactivity in a way other libraries don't and I've continued to focus there.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Why didnt you wrap the inline count function within a useCallback hook?
Also using a state object withing the set method may cause an infinite loop if used within a use effect so you need to use the previous value.
Apply both and u get this:
const incrementCount = useCallback(()=>setCount((prev)=>prev+1),[])
And why not put the callback in the useEffect dependency array?
The function would then look like this:
function useInterval(callback,delay){
useEffect(()=>{
let id = setInterval(callback,delay)
return () => clearInterval(id)
},[delay, callback])
}
But youre still right about the refs. React needs to have the refs explicitly mentioned in the array of dependencies to keep track of changes.
I wonder if it is possible to use Solid within react and im curious if it would make things easier and better.
Edit:
Your approach is great. I actually learned something for future reference. You wrote the code in a way that the next dev who is using the useInterval function doesnt have to think about wrapping their callback function within a useCallback. Thanks!
Those are fair questions. I took this example directly from Dan Abramov's blog: overreacted.io/making-setinterval-...
I think his motivation was to solve this without using the function form of
setStatesince he could have done that at the beginning of the article and moved on. In any case if you haven't read it, I highly recommend it.I did make a react-solid-state library but it is basically like MobX. Pre-hooks it felt kind of cool, post-hooks I sort of lost interest in it. I thought React introducing its own primitives was a gamechanger and sure enough things like Recoil started showing up. React can never really leverage the benefits here in terms of execution performance and the DX is not amazing with the need for wrappers etc. There is probably a smarter way to approach it now but as I said limited benefits. Solid fully embraces fine-grained reactivity in a way other libraries don't and I've continued to focus there.