Lazy Render

Perhaps an anti pattern, but this project shows how to use loading=lazy on an img element to lazy render a component.

In this particular case, the lazy rendered component, triggers a call to react-toastify.

import { ToastContainer, toast } from "react-toastify";
import { LazyRender } from "native-lazy-render";
const HelloWorld = () => {
  useEffect(() => {
    toast("Hello World!", { toastId: "Hello" });
  }, []);
  return null;
};
export default function App() {
  const [show, setShow] = useState(true);
  useEffect(() => {
    if (!show) {
      const handler = () => setShow(true);
      window.addEventListener("scroll", handler);
      return () => window.removeEventListener("scroll", handler);
    }
  }, [show]);
  return (
    <>
      <ToastContainer ></ToastContainer>
      <header className="text">
        <h1>Lazy Render</h1>
        <h2>Scroll down</h2>
        <button onClick={() => setShow(false)}>Reload</button>
      </header>
      <div className="long"></div>
      {show && (
        <LazyRender>
          <HelloWorld ></HelloWorld>
        </LazyRender>
      )}
      <footer className="text">End</footer>
    </>
  );
}