React Support?

I was wondering if Lozad works with react? I’m currently having trouble getting it work, I was trying to utilize lifecycle methods and have it not start observing until after the component is rendered. However, it seems like based on the nature of react and vdom, it doesn’t actually work because my component is rendered before Lozad is initialized.

Any ideas? I was trying something along the lines of:

    observer = lozad('.lozad', {
        load: function() { console.log('loaded'); }
    });

    componentDidMount() {
        this.observer.observe();
    }

Thanks in advanced!

[sean-clayton]

@blainemuri Here’s how I’d do it with a useEffect hook.

import React, { useEffect } from "react";
import lozad from "lozad";

export default function App() {
  const { observe } = lozad();

  useEffect(() => {
    observe();
  }, []);

  return <img className="lozad" data-src="my-image-path.here" />
}

And here’s a CodeSandbox demo: https://codesandbox.io/s/suspicious-wilson-dj2oq

[blainemuri]

It would be nice to reopen this discussion with an example of how to do this without componentDidMount so that it can work with the new react-hooks paradigm.