Open JaeSeoKim opened 7 months ago
+1 Since I recently implemented this exact use case and your implementation looks pretty sound.
I am curious if you noticed any tangible benefits using flushSync
and useLayoutEffect
since I implemented this originally with just setState
and useEffect
and it works identically from what my eyes can see, although I was using a small set of features.
@Jdyn In fact, in the case of useLayoutEffect, it is said to work before browser paint, but I am not sure if it will work in this case as well. 😅 However, with flushSync, React's State update doesn't work synchronously, so if you don't use that logic, you can quickly move the screen and zoom in and out, you'll see the component partially delayed and rendered.
It will help you understand if you refer to the official document
Target Use Case
This feature is allows you to render content received via the
querySourceFeatues
function without worrying about React's lifecycle.Example
Display HTML clusters with custom properties
Proposal
The QuerySourceFeatures (temporary name) component receives the arguments of the
querySourceFeatures
function, and additionally the target component that should be rendered viarender
.Internally, the component references events for
data
,move
, andmoveend
, and renders through the passed inrender
if any data has changed.Here's example code to use
I've written POC code in the following repo.
If you think it's a good idea to add these features, please review them for further improvements and I'll write a PR.
Otherwise I'll PR that POC code as an example.