export TS types

[frolic]

I have a throttled onResize handler. I found that unless I wrap in a useCallback, the throttling doesn't take effect because the resize handler triggers a dimension change, which triggers a rerender, which replaces the onResize 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:

[ZeeCoder]

Yeah I see no reason not to 🤔

[github-actions]

🎉 This issue has been resolved in version 9.1.0-alpha.1 🎉

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ZeeCoder]

@holic could you check if the above mentioned alpha release addresses this as expected?

[frolic]

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.

[ZeeCoder]

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.)

[frolic]

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!

[github-actions]

🎉 This issue has been resolved in version 9.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[ZeeCoder]

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?

[frolic]

I just missed that there was an example for throttling, just went straight to implementing it myself.