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