[RFC] React Render link

[s-yadav]

Unlink component from React render cycle if a component is not intersection (out of visible area). A lot of time components get rerendered due to some data change (props, context or global store). While this is ideal behaviour the re-rendering of those components can be deferred until they are visible to the user. Basically, avoid the cost of rendering for components which is not shown to the user, and that might update when we open that component or scroll to that component.

This can be implemented by using IntersectionObserver and HOC with React.memo. We can probably break this into two util (library) 1st: react hook useIntersection()

const {isIntersecting, elementRef} = useIntersection();

<div ref={elementRef}>{isIntersecting ?  'This element is visible' : 'Not visible'}</div>

2nd: HOC to avoid rerendering React Render link ReactRenderLink(Component) -> This will return a memoized component which will rerender only if it is intersecting. We can have a custom comparison function for the memoized components.

Few more things to think upon

• For our hook how can we handle IntersectionObserver options?
• Should we have an API for defining IntersectionObserver boundaries.
• Disconnecting IntersectionObserver if nothing is observing it, or if the root element gets removed.
• Better naming for this Util.
• Exposing complete IntersectionObserverEntry object, may be like this

  const {isIntersecting, entry, elementRef} = useIntersection();

[nik72619c]

@s-yadav created a small poc of the implementation here - https://codesandbox.io/s/render-visible-react-components-ri937?file=/src/App.js:372-389 Let me know your thoughts! Thinking now towards the following that you mentioned in the issue description

• For our hook how can we handle IntersectionObserver options?
• Should we have an API for defining IntersectionObserver boundaries.
• Disconnecting IntersectionObserver if nothing is observing it, or if the root element gets removed.
• Better naming for this Util.
• Exposing complete IntersectionObserverEntry object, may be like this

[nik72619c]

I guess you would have to invite me to the organisation for me to commit changes in a repo