<img src='placeholder.jpg' data-src='actual-image.jpg' loading='lazy' alt='Lazy-loaded Image'>Lazy-loaded Image
html
Related Posts
More content you might like
Tutorial
php
Resolving N+1 Query Problems in Laravel
Check your logs for repeated queries related to relationships.
Laravel provides eager loading to solve N+1 issues by retrieving related data in a single query.
Nov 16, 2024
Read More Cheatsheet
javascript
React Performance Optimization Cheatsheet: Hooks, Memoization, and Lazy Loading
import React, { useState, useCallback } from 'react';
function ParentComponent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount((prevCount) => prevCount + 1);
}, []);
return (
<div>
<ChildComponent onClick={increment} />
<p>Count: {count}</p>
</div>
);
}
function ChildComponent({ onClick }) {
console.log('Child component re-rendered');
return <button onClick={onClick}>Increment</button>;
}Here, useCallback prevents the increment function from being recreated on every render, which in turn prevents the ChildComponent from unnecessary re-renders.
Aug 20, 2024
Read MoreDiscussion 0
Please sign in to join the discussion.
No comments yet. Be the first to share your thoughts!