We refactored Favorites into a single, predictable React hook that works for both anonymous and verified users, avoids infinite re-renders, and keeps multiple tabs in sync — without peppering pages with ad-hoc effects.<figure class="image"><img src="https://images.unsplash.com/photo-1693575471707-be8bf2ccbc61?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxNTQwMTB8MHwxfHNlYXJjaHw2MXx8ZmF2b3JpdGVzfGVufDB8fHx8MTc1NjUxMjI2Nnww&amp;ixlib=rb-4.1.0&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@maryam_goli?utm_source=DNX&amp;utm_medium=referral">maryam Rad</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><h2>What we needed</h2>Anonymous / unverified usersStore favorites in <code>localStorage</code> (limit 50)Cross-tab updates (changes in one tab appear in others)Verified usersStore favorites in the database (limit 200)Auto-fetch on login (once per user)Optimistic add/removeFirst-login one-way mergeLocal <code>localStorage</code> → account (handled elsewhere)Simple page APIPages shouldn’t do fetches or wire up listeners. They should just read <code>favorites</code> and render.<h2>The early issues</h2>Infinite re-render loop We initially wrote an effect like:<pre><code class="language-plaintext">useEffect(() =&gt; {
 (async () =&gt; {
 const list = await fetchRemoteFavorites(userSub);
 setRemoteFavs(list);
 })();
}, [userSub, remoteFavs]);
</code></pre>Including <code>remoteFavs</code> in the dependency array caused the effect to re-run every time we called <code>setRemoteFavs</code>, which called the effect again… → “Maximum update depth exceeded”.Overexposed API (<code>getFavorites</code>) We exported a <code>getFavorites()</code> function that sometimes fetched, sometimes read cache/local — and pages were calling it inside effects. That created dependency tangles and duplicated fetch logic.Cross-tab sync outside the hook We initially put a <code>storage</code> event listener in the page to refresh local favorites. That tied component code to storage mechanics and reintroduced dependency loops.<h2>The final design (simple + reliable)</h2><h3>1) Hook owns all side effects</h3>Fetch: The hook auto-fetches once per verified <code>userSub</code> inside <code>useEffect([userSub])</code>.Cross-tab sync: The hook listens to the <code>storage</code> event internally when not verified.Pages don’t fetch. They just read <code>favorites</code> and <code>loading</code>.<h3>2) Hide <code>getFavorites</code></h3>No more <code>getFavorites()</code>. Returning <code>favorites</code> directly from the hook makes the page a pure consumer — it just subscribes to updates by re-rendering.<h3>3) Use a “local count” to trigger re-renders</h3>For local users, writes to <code>localStorage</code> don’t automatically cause a React re-render. We increment a tiny state counter (<code>localVersion</code>) after local writes (and on <code>storage</code> events) to re-render the component tree. On the next render, the hook reads the latest <code>localStorage</code> and surfaces the new list.<blockquote>In other words, components subscribing to the hook’s state see updates without wiring their own listeners. (“Listening” in React is just re-rendering when the hook’s state changes.)</blockquote><h2>The hook (final)</h2><pre><code class="language-plaintext">/**
 * useFavorites
 * - Anonymous/unverified: localStorage (max 50), cross-tab via 'storage'
 * - Verified: DB, auto-fetch once per userSub, optimistic add/remove
 * - Returns: { favorites, loading, isFavorite, addFavorite, removeFavorite }
 */
import { useEffect, useState } from "react";
import { useUser } from "@auth0/nextjs-auth0/client";
import { queueAddFavorite, queueRemoveFavorite, fetchRemoteFavorites } from "../helpers/favoritesQueue";

const STORAGE_KEY = "SS-FAVORITES-V2";
const MAX_LOCAL = 50;

/* localStorage helpers */
function readLocal() {
 if (typeof window === "undefined") return [];
 try { return JSON.parse(localStorage.getItem(STORAGE_KEY) || "[]"); } catch { return []; }
}
function writeLocal(list) {
 if (typeof window === "undefined") return;
 try { localStorage.setItem(STORAGE_KEY, JSON.stringify(list)); } catch {}
}

export function useFavorites() {
 const { user } = useUser();
 const userSub = user?.email_verified ? user?.sub : null;

 // For verified users: null = loading, []|[...] = loaded
 const [remoteFavs, setRemoteFavs] = useState(null);
 // For local users: bump to force re-render after local writes or storage events
 const [localVersion, setLocalVersion] = useState(0);

 // Auto-fetch once per verified sub
 useEffect(() =&gt; {
 if (!userSub) {
 // Leaving verified state → clear once
 setRemoteFavs((prev) =&gt; (prev === null ? prev : null));
 return;
 }

 let alive = true;
 (async () =&gt; {
 try {
 const list = await fetchRemoteFavorites(userSub);
 if (alive) setRemoteFavs(Array.isArray(list) ? list : []);
 } catch {
 if (alive) setRemoteFavs([]);
 }
 })();

 return () =&gt; { alive = false; };
 }, [userSub]);

 // Cross-tab sync for local/unverified: bump to re-render and re-read localStorage
 useEffect(() =&gt; {
 if (userSub) return;
 const onStorage = (e) =&gt; {
 if (e.key === STORAGE_KEY) setLocalVersion((v) =&gt; v + 1);
 };
 window.addEventListener("storage", onStorage);
 return () =&gt; window.removeEventListener("storage", onStorage);
 }, [userSub]);

 // Derived outputs
 const loading = !!userSub &amp;&amp; remoteFavs === null;
 const favorites = userSub
 ? Array.isArray(remoteFavs) ? remoteFavs : []
 : readLocal(); // re-evaluated on each render; localVersion triggers re-render

 function isFavorite(id) {
 if (!id) return false;
 return Array.isArray(favorites) &amp;&amp; favorites.some((it) =&gt; it.id === id);
 }

 function addFavorite(item) {
 if (!item || !item.id) return;

 if (userSub) {
 // optimistic replace/prepend
 setRemoteFavs((prev) =&gt; {
 const base = Array.isArray(prev) ? prev : [];
 const filtered = base.filter((x) =&gt; x.id !== item.id);
 return [item, ...filtered];
 });
 queueAddFavorite(item, userSub); // fire-and-forget
 } else {
 const current = readLocal().filter((x) =&gt; x.id !== item.id);
 writeLocal([item, ...current].slice(0, MAX_LOCAL));
 setLocalVersion((v) =&gt; v + 1); // trigger re-render so subscribers update
 }
 }

 function removeFavorite(id) {
 if (!id) return;

 if (userSub) {
 setRemoteFavs((prev) =&gt; {
 const base = Array.isArray(prev) ? prev : [];
 return base.filter((x) =&gt; x.id !== id);
 });
 queueRemoveFavorite(id, userSub);
 } else {
 writeLocal(readLocal().filter((x) =&gt; x.id !== id));
 setLocalVersion((v) =&gt; v + 1); // trigger re-render so subscribers update
 }
 }

 return { favorites, loading, isFavorite, addFavorite, removeFavorite };
}
</code></pre><h2>Why this works</h2>No <code>getFavorites</code>: Pages don’t call into the hook to fetch or read snapshots. They just subscribe by destructuring <code>{ favorites, loading }</code>.No dependency loops: The only fetching effect depends solely on <code>userSub</code>, so <code>setRemoteFavs</code> doesn’t retrigger it.Cross-tab for free: The hook owns the <code>storage</code> listener; pages don’t wire up anything. When a change happens elsewhere, we bump <code>localVersion</code> to re-render and re-read <code>localStorage</code>.Optimistic UX: Adding/removing updates the in-memory state immediately for verified users, while the debounced queue writes to the server.<h2>Extra notes</h2>HTTP 201 vs 200: If your fetch endpoint is <code>POST /users/favorites</code>, a 201 Created response is expected. If you want read semantics, expose a <code>GET /users/favorites</code> that returns 200 OK.Alive guard: We keep a tiny <code>alive</code> flag to avoid “setState on unmounted” warnings if the user navigates away mid-fetch.Terminology: React components don’t “listen” in the traditional event sense — they re-render when the hook’s internal state changes. Thinking of it as “subscribing” to the hook’s state is a good mental model.

We built a unified useFavorites hook to handle both local and verified users: logged-out or unverified users store up to 50 favorites in localStorage (with cross-tab sync), while verified users get 200 favorites synced to the database with optimistic add/remove. Early versions had problems with infinite re-renders and over-complicated refs, but the fix was simple—limit the fetch effect to userSub changes and add a lightweight alive guard. The final hook is clean, predictable, and keeps UI updates instant while background queues handle persistence.

All Posts In Hook