Package providing extra layer of lifecycle primitives for Solid.
npm install @solid-primitives/lifecycle



Package providing extra layer of lifecycle primitives for Solid.
- createIsMounted - Returns a boolean signal indicating whether the component is mounted or not.
- isHydrated - A signal with the same behavior as isHydrating but this one focused only on client-side updates.
- onElementConnect - Calls the given callback when the target element is connected to the DOM.
``bash`
npm install @solid-primitives/lifecycleor
yarn add @solid-primitives/lifecycleor
pnpm add @solid-primitives/lifecycle
Returns a boolean signal indicating whether the component is mounted or not.
It's a simple wrapper around createSignal and onMount,createMemo
but it can make your code feel more declarative - especially when used with .
`tsx
import { createIsMounted } from "@solid-primitives/lifecycle";
const isMounted = createIsMounted();
const windowWidth = createMemo(() => (isMounted() ? ref.offsetWidth : 0));
let ref: HTMLElement;
isHydratedA signal accessor indicating if the owner is done hydrating.
-
false during SSR (always)
- false on the client if the component evaluation is during a hydration process.
- true on the client if the component evaluates after hydration or during clinet-side rendering.If it returns
true it means that you can safely change the initial values of signals
that are used in the JSX, without causing a mismatch between the server and client.It can be used in computations as a signal, and it will trigger a re-evaluation when the hydration state changes.
But it can also be used as a simple check of the hydration state.
`tsx
import { isHydrated } from "@solid-primitives/lifecycle";const serverFallback = 0;
const [vw, setVw] = createSignal(
// if the component is hydrated, we can safely use the window width immediately
isHydrated() ? window.innerWidth / 100 : serverFallback,
);
Window width: {vw()}vw
;
`$3
isHydrated can be used to easily implement a ClientOnly component that will only render its children on the client.`tsx
import { createMemo, FlowComponent, JSX } from "solid-js";
import { isHydrated } from "@solid-primitives/lifecycle";// This component will only render its children on the client
export const ClientOnly: FlowComponent = props => {
const children = createMemo(() => isHydrated() && props.children);
return <>{children()}>;
};
// Usage
;
`onElementConnectonMount is a common lifecycle hook that is used to perform side-effects when the component is mounted.
However, it is not certain that the elements are actually connected to the DOM when the mount callback is called.> Note If that's the case, it might be a sign that you are executing components that are not visible to the users my mistake.
>
> And if this is something intentional, you probably already have a way to hook into the actual DOM rendering.
>
> If you are not sure, you can use
onElementConnect instead of onMount to make sure that you are caling your callback when the elements are connected to the DOM.`tsx
ref={el => {
// often false, but will be true during hydration
el.isConnected; onMount(() => {
// often true, but will be false if the executed component is not actually getting rendered
el.isConnected;
});
onElementConnect(el, () => {
// always true
el.isConnected;
});
}}
/>
``You can see the primitives in action in the following sandbox: https://primitives.solidjs.community/playground/lifecycle/
See CHANGELOG.md