How to use @shopify/react-intersection-observer - 2 common examples

'You’ve changed the defer strategy on an ',
        'component after it has mounted. This is not supported.',
      ].join(' '),
    );
  }

  let intersection: IntersectionObserverEntry | null = null;
  let intersectionRef: React.Ref = null;

  // Normally this would be dangerous but because we are
  // guaranteed to have thrown if the defer option changes
  // we can be confident that a given use of this hook
  // will only ever hit one of these two cases.
  /* eslint-disable react-hooks/rules-of-hooks */
  if (defer === DeferTiming.InViewport) {
    [intersection, intersectionRef] = useIntersection();
  }
  /* eslint-enable react-hooks/rules-of-hooks */

  const loadRemote = React.useCallback(async () => {
    try {
      setResult({status: Status.Loading});
      const importResult = await load(source, getImport, nonce);

      if (mounted.current) {
        setResult({status: Status.Complete, imported: importResult});
      }
    } catch (error) {
      if (mounted.current) {
        setResult({status: Status.Failed, error});
      }
    }

const effect =
      resolved != null && id != null && manager != null ? (
         manager.markAsUsed(id())}
        />
      ) : null;

    const content = loading ? renderLoading() : render(resolved);

    const intersectionObserver =
      loading && defer === DeferTiming.InViewport ? (
        
      ) : null;

    return (
      <>
        {effect}
        {content}
        {intersectionObserver}
      
    );
  }