Custom React Hooks for API Calls + Lazy Loading View-Based Data

In this post, I’ll walk you through a problem I encountered during a real-world Next.js project — multiple API-bound sections loading all at once, even before the user scrolled to them.

This kind of eager data fetching doesn’t just waste network requests — it hurts performance, increases TTI, and slows down Core Web Vitals.

To fix it, I built a custom React hook that delays API calls until a component enters the viewport. Think of it as useEffect + IntersectionObserver bundled neatly for reuse.

📍 The Problem

In one of my recent projects (a performance-optimized energy website built with Next.js + GraphQL), we had:

• 4–5 API-heavy sections on a single page
• All triggering data fetch on initial load, regardless of visibility
• Resulting in unnecessary bandwidth usage and slow perceived performance

🛠️ The Solution: Build a Reusable Hook

The goal was simple:

Don’t fetch anything until the section is actually visible.

Let’s break it down.

🔁 Step 1 – useInView Hook

import { useEffect, useRef, useState } from 'react'; export const useInView = () => { const ref = useRef(null); const [isInView, setIsInView] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) setIsInView(true); }); if (ref.current) observer.observe(ref.current); return () => observer.disconnect(); }, []); return [ref, isInView]; }; 

⚙️ Step 2 – Use It in a Component

const ServicesSection = () => { const [ref, isInView] = useInView(); const [data, setData] = useState(null); useEffect(() => { if (isInView && !data) { fetch('/api/services') .then((res) => res.json()) .then(setData); } }, [isInView]); return ( <section ref={ref}> <h2>Our Services</h2> {data ? data.map(item => <p key={item.id}>{item.title}</p>) : <p>Loading...</p>} </section> ); }; 

♻️ Step 3 – Abstract It into useLazyFetchOnView

export const useLazyFetchOnView = (callback) => { const [ref, isInView] = useInView(); const [hasFetched, setHasFetched] = useState(false); useEffect(() => { if (isInView && !hasFetched) { callback(); setHasFetched(true); } }, [isInView]); return ref; }; 

Now your component looks much cleaner:

const ref = useLazyFetchOnView(() => { fetch('/api/testimonials') .then(res => res.json()) .then(setTestimonials); }); 

🔄 Integration with React Query / Zustand

You can replace fetch() with your existing state logic:

const { refetch } = useQuery('teamData', fetchTeam, { enabled: false }); const ref = useLazyFetchOnView(() => refetch()); 

Or dispatch a Zustand action:

const fetchData = useStore((state) => state.fetchData); const ref = useLazyFetchOnView(fetchData); 

📈 Before vs After

This small pattern helped us reduce noise, clean up component logic, and improve performance across the board.

🧠 Final Thoughts

Lazy loading is not just for images.

If you have view-based components — testimonials, blogs, services, etc. — don't fetch data until they come into view.

This pattern can be reused across your app, and it's easy to test and maintain.

Let me know if you'd like a reusable package out of it — happy to open source it if there's interest.