skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

using-kea-disposables

Registers timers and event listeners in kea logic with automatic cleanup on unmount.

713|118|Updated Aug 11, 2020
Search Tags:#cleanup#Frontend#event listeners#reAct#State management#kea#setinterval
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill using-kea-disposables
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: using-kea-disposables
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/using-kea-disposables
Command: npx skills add https://github.com/PostHog/posthog-foss --skill using-kea-disposables

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Timers, event listeners, and subscriptions created inside kea logic need explicit teardown, and the manual cache.foo = setInterval(...) plus beforeUnmount cleanup pattern is error-prone and keeps background work running in hidden tabs.

Core Features & Use Cases

  • Managed resource registration: Register setInterval, setTimeout, window.addEventListener, MediaQueryList listeners, WebSockets, and observers through cache.disposables.add(setup, key?, options?) with automatic cleanup on unmount.
  • Keyed lifecycle control: Use named keys to replace previous registrations or call cache.disposables.dispose(key) to tear down a resource early on state transitions.
  • Visibility-aware pausing: Background work automatically pauses when the tab is hidden and resumes on focus, with an opt-out via pauseOnPageHidden: false for listeners like storage or visibilitychange.
  • Use Case: When adding a polling interval to a kea logic, register it through cache.disposables.add returning a cleanup function instead of writing a matching beforeUnmount block.

Quick Start

Ask the AI to convert a kea logic that stores a setInterval on cache and clears it in beforeUnmount into the cache.disposables.add pattern with a named key.

Frequently Asked Questions about using-kea-disposables

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clean up setInterval in kea logic?▼

Register the interval through cache.disposables.add with a setup function that returns a cleanup calling clearInterval. The disposablesPlugin runs that cleanup automatically on unmount, so no beforeUnmount block is needed.

How do I remove a window event listener when kea logic unmounts?▼

Add the listener inside cache.disposables.add and return a cleanup function that calls removeEventListener with the same handler reference. The plugin executes the cleanup on unmount and around tab visibility changes.

When should I use a named key with cache.disposables.add?▼

Use a named key when you need to call cache.disposables.dispose(key) to stop the resource early, or when re-adding the same setup should replace the previous registration, such as spam-replacing a setTimeout.

Does cache.disposables pause timers when the tab is hidden?▼

Yes, pauseOnPageHidden defaults to true, so cleanup runs when the tab hides and setup re-runs on focus. Opt out with pauseOnPageHidden false only for listeners like storage, online, or visibilitychange that must fire while hidden.

When should I still use beforeUnmount in kea logic?▼

Reserve beforeUnmount for teardown that is not a resource you control, such as flushing state, persisting to localStorage, or calling a third-party dispose method. Timers and listeners you register should go through cache.disposables instead.

Related Skills

Explore More Software Engineering Skills→
GaoZimeng0425GaoZimeng0425
6

react-state-management

Guide React state management with Redux Toolkit, Zustand, Jotai, and React Query.

Community
Advanced
wildbitcawildbitca
1

flutter-resource-management

Enforce disposal and lifecycle safety for Flutter controllers and resources.

Official
Advanced
stacksjsstacksjs
622

stacks-events

Dispatch and listen to events in a Stacks application with a mitt-based emitter.

Official
Intermediate
latticeHQlatticeHQ

react-effects

Guide React developers on when to use useEffect for side effects and lifecycle management.

Official
Intermediate