Lazy-loaded Image

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.

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.