React Globe Gl Lifecycle And Props

---
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