Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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() {;

Thanks in advanced!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:2
  • Comments:14 (4 by maintainers)

github_iconTop GitHub Comments

sean-claytoncommented, Feb 14, 2020

@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(() => {
  }, []);

  return <img className="lozad" data-src="" />

And here’s a CodeSandbox demo:

blainemuricommented, Jan 15, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Where To Get Support
Where To Get Support. React has a community of millions of developers. On this page we've listed some React-related communities that you can...
Read more >
6 Best React Communities to get Information and Support
6 Best React Communities to get Information and Support · 1. Dev's React Community · 2. Hashnode's React Community · 3. Reactiflux ·...
Read more >
React |
React is an open-source JavaScript web framework for building modern web applications. Release, Released, Active Support, Security Support, Latest. 18.2, 6 ...
Read more >
React Experts to Help, Mentor, Review Code & More
Get your project built, code reviewed, or problems solved by vetted React freelancers. Learn from expert mentors with team training & coaching experiences....
Read more >
Supported Browsers and Features
For a set of polyfills to support older browsers, use react-app-polyfill. Supported Language Features​. This project supports a superset of the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found