# Component Lifecycle Manager

> Manages component lifecycle from creation to destruction. Handles initialization, mounting, updating, and cleanup patterns across React, Vue, and vanilla JS.

- Skill: `fadil369/component-lifecycle-manager` (Agent Skill)
- Install (CLI): `npx skillmds@latest add fadil369/component-lifecycle-manager`
- Raw SKILL.md: https://api.skillmd.com/api/skills/fadil369/component-lifecycle-manager/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: fadil369 (https://skillmd.com/u/fadil369)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/fadil369/component-lifecycle-manager

---


# Component Lifecycle Manager

Manages component lifecycle from creation to destruction. Handles initialization, mounting, updating, and cleanup patterns across React, Vue, and vanilla JS.

## Decision Framework

### When to Apply
Use when: Complex components with side effects, subscriptions, timers, or external resources requiring cleanup

### When NOT to Apply
Don't use when: Simple stateless presentational components

## Anti-Patterns

### 1. Memory Leaks
```javascript
// BAD: No cleanup
componentDidMount() {
  window.addEventListener('resize', this.handleResize);
}
// GOOD: Always clean up
componentWillUnmount() {
  window.removeEventListener('resize', this.handleResize);
}
```

### 2. Unnecessary Re-renders
```javascript
// BAD: New object every render
<Component style={{ color: 'red' }} onClick={() => doSomething()} />

// GOOD: Memoize
const style = useMemo(() => ({ color: 'red' }), []);
const handleClick = useCallback(() => doSomething(), []);
```


## Trigger Phrases

- "Component lifecycle"
- "Mount/unmount"
- "useEffect cleanup"
- "Memory leak"
- "Re-render optimization"

## Patterns

### Effect Lifecycle (React)
```javascript
useEffect(() => {
  const controller = new AbortController();
  fetchData(controller.signal);
  return () => controller.abort(); // cleanup
}, [dependency]);
```

### Mount/Unmount Hooks
```javascript
function useMountUnmount(onMount, onUnmount) {
  useEffect(() => {
    onMount?.();
    return () => onUnmount?.();
  }, []);
}
```

## Integration
- Works with: state-machine-designer, performance-budget-enforcer