atomico-hooks-effects

Name: atomico-hooks-effects
Availability: InStock
Author: Atomico

Coordinate Atomico hook side effects across web component lifecycle callbacks.

1.3k|44|Updated Aug 25, 2018

Search Tags:#hooks #lifecycle #side-effects #web-components #useeffect #atomico

Ready to run

npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-effects

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: atomico-hooks-effects
Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-hooks-effects
Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-hooks-effects

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Atomico hooks provide a consistent way to manage side effects and lifecycle for web components, bridging the gap between React-like patterns and the web component lifecycle.

Core Features & Use Cases

Use useEffect for post-render asynchronous operations such as data fetching and subscriptions.
Use useLayoutEffect for synchronous DOM measurements and mutations after updates.
Use useInsertionEffect for pre-paint DOM tweaks and style injections.
Maps lifecycle callbacks (connectedCallback / disconnectedCallback) to hook-based effects, reducing boilerplate and errors.

Quick Start

Import c and the hooks from atomico and begin using these hooks in your components.

Frequently Asked Questions about atomico-hooks-effects

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

FAQPage Schema

How do I manage side effects in Atomico web components?▼

Manage side effects in Atomico web components by using useEffect, useLayoutEffect, and useInsertionEffect to map lifecycle callbacks to dependency-based updates. This bridges React-like patterns with web component semantics, reducing boilerplate for operations like data fetching and DOM mutations.

When should I use useLayoutEffect vs useEffect for DOM manipulations?▼

Use useLayoutEffect for synchronous DOM measurements and mutations after updates, while useEffect handles post-render asynchronous operations. useLayoutEffect executes before the browser paints, making it suitable for pre-paint DOM tweaks, whereas useEffect runs asynchronously after render.

Can I use React-style hooks for connectedCallback and disconnectedCallback lifecycle management?▼

Yes, you can use React-style hooks for connectedCallback and disconnectedCallback lifecycle management in Atomico. The hooks map web component lifecycle semantics to dependency-based updates, allowing you to orchestrate subscriptions and side effects across render cycles without manual lifecycle boilerplate.

What is the best way to handle subscriptions across render cycles in Atomico?▼

The best way to handle subscriptions across render cycles in Atomico is by using useEffect for post-render asynchronous operations. useEffect manages subscriptions by mapping them to web component lifecycle semantics with dependency-based updates, ensuring proper cleanup during disconnectedCallback.

Do I need useInsertionEffect for style injections in web components?▼

useInsertionEffect is designed for pre-paint DOM tweaks and style injections in web components. It executes before the browser paints, making it the appropriate hook for injecting styles and ensuring they are applied before the user sees the rendered component.

Why does my Atomico component effect run on every render instead of only when dependencies change?▼

Atomico hooks rely on dependency-based updates to determine when effects run. If your effect runs on every render, verify that you are passing a dependency array to useEffect or useLayoutEffect; omitting it causes the hook to execute after every render cycle instead of only when specified dependencies change.