Closed holic closed 1 year ago
Yeah I see no reason not to :thinking:
:tada: This issue has been resolved in version 9.1.0-alpha.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
@holic could you check if the above mentioned alpha release addresses this as expected?
Looks great, thank you!
On the original motivation/need for this, is it expected that the resize handler reference (when re-rendering) is not "stable"? Is it expected that we should wrap our onResize
in a useCallback
to make it stable?
(just passing in the throttle
-wrapped function into onResize
results in ~nothing being throttled, because the function is recreated each render, which causes useResizeObserver
's useEffect
to reevaluate.
Great!
On throttling, I'm not sure I understand the issue you're facing, can you share a codesandbox by any chance? Also, is the throttling example in the docs not working for you? (See here: https://codesandbox.io/s/use-resize-observer-throttle-and-debounce-8uvsg?file=/src/useThrottledResizeObserver.js)
On the callback:
uRO
always calls the latest onResize
instance.
But regardless of what the hook does though, in order for a throttle function to work you'd have to have a stable instance, so that it can internally register the individual calls and handle the throttling.
(I'll hold off on releasing until we wrap up this discussion in case there's anything else actionable here.)
I hadn't seen the example, but it's doing what I ended up with (I just happened to thread it through useCallback
instead of useMemo
). A stable instance is what I was wondering about!
All good to go here. Thank you!
:tada: This issue has been resolved in version 9.1.0 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Nice, one last question @holic if you had time: did you not find the throttle example in the docs, or did you just not think to check them at all? I'm just wondering if there's anything I could improve on the docs in your opinion to maybe better surface examples like these?
I just missed that there was an example for throttling, just went straight to implementing it myself.
I have a throttled
onResize
handler. I found that unless I wrap in auseCallback
, the throttling doesn't take effect because the resize handler triggers a dimension change, which triggers a rerender, which replaces theonResize
handler with a new one (starting a fresh throttle timer).However, moving out the
onResize
handler means I lose out on some type inference. I don't love copying over types and would prefer to import them. Looks like this library declares types but doesn't export them, so I can't use them directly.Here's my current workaround: