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

- Skill: `ecnu-icalk/react-globe-gl-lifecycle-and-props` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/react-globe-gl-lifecycle-and-props`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/react-globe-gl-lifecycle-and-props/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/react-globe-gl-lifecycle-and-props

---


# 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