react-lifecycle-z

LIVE DEMO

react-lifecycle-z is a tiny, declarative lifecycle utility toolkit for React.

It provides clean, explicit lifecycle semantics without over-engineering or breaking React's mental model.

Write lifecycle like intent. Keep effects predictable.

📖 Why react-lifecycle-z?

• useMount -- run logic on mount
• useUpdate -- run logic on dependency updates (skip first render)
• useUnmount -- run cleanup logic
• useLayoutMount -- layout-phase mount effect
• useLifecycle -- object-style lifecycle API
• StrictMode-safe mount option
• Optional transition support for updates
• Tiny, dependency-free core
• Fully TypeScript-ready

📦 Installation

npm install react-lifecycle-z

🚀 Usage

Basic Mount / Update / Unmount

import {
  useMount,
  useUpdate,
  useUnmount
} from "react-lifecycle-z";

function Demo({ count }: { count: number }) {
  useMount(() => {
    console.log("Mounted");
  });

  useUpdate(() => {
    console.log("Updated:", count);
  }, [count]);

  useUnmount(() => {
    console.log("Unmounted");
  });

  return <div>{count}</div>;
}

Layout Mount

useLayoutMount(() => {
  console.log("Layout mounted");
});

StrictMode-safe mount

useMount(() => {
  console.log("Only once even in StrictMode dev");
}, { strict: true });

Transition update

useUpdate(() => {
  setHeavyState(data);
}, [data], { transition: true });

🧩 Object Lifecycle API

A more declarative way to describe lifecycle behavior:

import { useLifecycle } from "react-lifecycle-z";

useLifecycle(
  {
    mount: () => console.log("Mounted"),
    update: () => console.log("Updated"),
    unmount: () => console.log("Unmounted")
  },
  [value]
);

This keeps lifecycle logic grouped and readable.

🧠 Design Philosophy

• No lifecycle engine
• No global orchestration
• No async in render
• No hidden magic

react-lifecycle-z keeps React effects explicit and predictable.

Lifecycle should remain simple --- just better expressed.

📊 Comparison

| Criteria | react-lifecycle-z | Raw useEffect | | ------------------------- | ------------------ | --------------------------- | | Mount helper | ✅ | ⚠️ Manual setup | | Update-only effect | ✅ | ⚠️ Manual first-render skip | | Unmount helper | ✅ | ⚠️ Manual cleanup return | | Object-style API | ✅ | ❌ | | StrictMode-safe mount | ✅ | ❌ | | Transition option | ✅ | ⚠️ Manual startTransition | | Bundle size | 🟢 Tiny | — | | Mental model | React-native | React-native |

📄 License

MIT