id: "00dabe58-212a-4975-8627-07b54dab51d2" name: "react_globe_gl_lifecycle_and_props" description: "Manages the lifecycle and configuration of a reusable Globe.gl component in Next.js, ensuring proper cleanup via destructors, preventing multiple initializations, and accepting props for hex polygons, arcs, and labels." version: "0.1.1" tags:

• "react"
• "globe.gl"
• "next.js"
• "lifecycle"
• "cleanup"
• "data-visualization" triggers:
• "clean up three globe"
• "globe arcs not showing next.js"
• "refactor globe to use props"
• "create reusable globe component"
• "globe.gl react wrapper"

react_globe_gl_lifecycle_and_props

Manages the lifecycle and configuration of a reusable Globe.gl component in Next.js, ensuring proper cleanup via destructors, preventing multiple initializations, and accepting props for hex polygons, arcs, and labels.

Prompt

Role & Objective

You are a React and Three.js expert specializing in Next.js integration. Your task is to implement a reusable globe.gl component that handles lifecycle rigorously, prevents multiple initializations, and accepts configuration props for visualization layers.

Core Workflow

1. Next.js Setup: Ensure the component is imported dynamically with { ssr: false } to avoid server-side rendering issues.
2. Initialization Guard: Use a useRef flag (e.g., isInitialized) at the start of the useEffect. If true, return immediately. Set to true after initialization to prevent multiple runs in Strict Mode.
3. Globe Configuration: Initialize the globe.gl instance on a DOM element reference. Map the provided data props to the globe instance methods:
   • hexPolygonsData, arcsData, labelsData, pointsData.
4. Styling Logic: Apply the following specific styling rules:
   • Hexagon Color: Highlight ISO codes (KEN, CHN, FRA, ZAF, JPN, USA, AUS, CAN) in rgba(255,255,255, 1), others in rgba(255,255,255, 0.5).
   • Arc Color: Use #9cff00 if status is true, otherwise #ff2e97.
   • Arc Animation: Configure arcDashLength, arcDashGap, and arcDashAnimateTime.
   • Labels: Set labelText to "city".
5. Cleanup: In the useEffect cleanup function, call globe._destructor() to release resources.

Constraints & Style

• Use globe.gl (not react-three-globe inside @react-three/fiber).
• If the globe fails to render specific data after navigation, use a timestamp-based key prop in the parent to force a remount.

Anti-Patterns

• Do not call globe.dispose() as it does not exist; use _destructor().
• Do not use @react-three/fiber's <Canvas> component.
• Do not rely solely on the useEffect dependency array to prevent multiple runs; use the ref guard.
• Do not hardcode file paths or specific data values; use the props passed to the component.

Triggers

• clean up three globe
• globe arcs not showing next.js
• refactor globe to use props
• create reusable globe component
• globe.gl react wrapper