'How to check and load only visible components in react native and load remaining page in the background?

  1. So I want to load a page that is content driven from CMS (I cannot use WebView)
  2. Page rendering is taking time so want to only render visible things on screen first (even if we get all the data from CMS).
  3. And then render the remainder of the page in the background once the visible content is rendered.
  4. I cannot use React Suspense because React native with Hermes engine doesn't support.
  5. Came across this old post - Is there some finished rendering event in react native? where there was no solution to detect rendered event on components.
  6. Cannot use FlatList because each section in the page content is different.
  7. Cannot use state updation as a sign that the component has rendered because the component is heavy and takes time to render after state updation.


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source