atomico-hooks-effects

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.

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.

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.

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.

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.

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.