React Ref Forwarding

I needed to implement impression logging on a React component and wanted to use the intersection-observer package. This is react library to interface with the Intersection Observer API and trigger events when html elements come into the viewport.

React components exist in the virtual DOM but the Web API is implemented for physical DOM objects. The virtual dom is an abstraction layer but sometimes you need reference to the underlying html elements, so that you can use the web api directly, instead or relying on React bindings to proxy it forward.

This is done by forwarding a reference. This reference object is shuttled down the component tree until it is attached to the html element. Now the reference can be used as a worm tunnel to directly access the element, and you can perform actions directly or change the node as you see fit.