fix: prevent duplicate API calls in React StrictMode

Problem: View count was incrementing by 2 on each page load due to React
StrictMode causing useEffect to run twice in development.

Solution: Use a ref to track if the fetch has already been initiated and
skip duplicate calls. This ensures:
- Dev behavior matches production (single API call)
- View count increments correctly (by 1, not 2)
- No duplicate network requests

This is the correct pattern for effects that should only run once,
even in StrictMode.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock 2025-11-11 13:15:30 -06:00
parent 25dfb71b3e
commit 0d59676b38
1 changed files with 12 additions and 1 deletions

View File

@ -3,7 +3,7 @@
import { css } from '@styled/css'
import { stack } from '@styled/patterns'
import { useParams, useRouter } from 'next/navigation'
import { useEffect, useState } from 'react'
import { useEffect, useState, useRef } from 'react'
import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
import { ConfigSidebar } from '@/app/create/worksheets/components/ConfigSidebar'
import { PreviewCenter } from '@/app/create/worksheets/components/PreviewCenter'
@ -40,11 +40,22 @@ export default function SharedWorksheetPage() {
const [preview, setPreview] = useState<string[] | undefined>(undefined)
const [showEditModal, setShowEditModal] = useState(false)
// Track if we've already fetched to prevent duplicate API calls in StrictMode
const hasFetchedRef = useRef(false)
// Fetch shared worksheet data
useEffect(() => {
// Prevent duplicate fetches in React StrictMode
if (hasFetchedRef.current) {
console.log('[SharedWorksheet] Skipping duplicate fetch (already fetched)')
return
}
const fetchShare = async () => {
try {
console.log('[SharedWorksheet] Fetching share data for:', shareId)
hasFetchedRef.current = true
const response = await fetch(`/api/worksheets/share/${shareId}`)
if (!response.ok) {