react-performify

⚡ React Performify

A lightweight React performance toolkit that gives developers easy-to-use hooks and utilities to measure, optimize, and visualize component performance. Its goal is to make performance management as easy as state management — all using clean, composable hooks.

🚀 Features

• 🧠 Smart utilities — abstract common React logic into reusable hooks
• 🪶 Lightweight — fast, efficient, and easy to integrate
• ⚙️ TypeScript support — fully typed API
• 🧩 Composable — integrate easily into existing code
• 🔧 Framework agnostic — works with any React setup (Vite, CRA, Next.js, etc.)

📘 Documentation

Comprehensive documentation is available here

👉 Documentation

📘 Storybook

Explore all hooks interactively on Storybook:
👉 Live Demo

📦 Installation

Once published to npm:

npm install react-performify
# or
yarn add react-performify

If you’re developing locally and want to test it

# Inside react-performify/
npm link

# In your target React project:
npm link react-performify

🧠 Available Hooks

Hook Name	Description
useDebouncedEffect	Runs effect after delay
useLazyMemo	Lazily memoizes value
useMemoizedCallback	Memoizes callback to avoid recreation
usePerformanceMonitor	Monitors performance metrics
usePerformanceOverlay	Displays performance overlay
usePerformanceStats	Tracks render statistics
useRenderCount	Counts component renders
useStableObject	Keeps object reference stable
useThrottledCallback	Throttles callback execution
useVirtualList	Optimizes rendering large lists
useWhyDidYouRender	Logs prop changes between renders

🧩 Example Usage

import React, { useState } from "react";
import type { Meta, StoryObj } from "@storybook/react";
import { usePerformanceOverlay } from "../usePerformanceOverlay";

const PerfOverlayDemo = () => {
    const [enabled, setEnabled] = useState(true);
    usePerformanceOverlay(enabled, 500, "bottom-left");

    return (
        <div style={{ padding: "20px" }}>
            <h3>usePerformanceOverlay Hook Demo</h3>
            <p>
                Toggle the overlay below. When enabled, an FPS counter appears
                on the bottom-left corner of your screen.
            </p>
            <button
                onClick={() => setEnabled(!enabled)}
                style={{
                    background: enabled ? "#d33" : "#3d3",
                    color: "white",
                    border: "none",
                    padding: "10px 16px",
                    borderRadius: "6px",
                    cursor: "pointer",
                }}
            >
                {enabled ? "Disable Overlay" : "Enable Overlay"}
            </button>
        </div>
    );
};

const meta: Meta<typeof PerfOverlayDemo> = {
    title: "Hooks/usePerformanceOverlay",
    component: PerfOverlayDemo,
};

export default meta;
type Story = StoryObj<typeof PerfOverlayDemo>;

export const Default: Story = {
    render: () => <PerfOverlayDemo />,
};

Development

git clone https://github.com/Shakir-Afridi/react-performify.git
cd react-performify
npm install

Start development mode

npm run dev

Build for production

npm run build

To test it in another project locally

npm link
# then in your test project:
npm link react-performify

🧾 License

This project is licensed under the MIT License.

💡 Contributing

Contributions are welcome! If you’d like to add new hooks or fix bugs, please open an issue or submit a pull request.

# Fork & clone
git clone https://github.com/Shakir-Afridi/react-performify.git

# Create a feature branch
git checkout -b feature/my-new-hook

# Commit changes
git commit -m "feat: add useXYZ hook"

# Push & open PR
git push origin feature/my-new-hook

👨‍💻 Author

React Performify — maintained by passionate open-source developers who believe in clean, reusable React logic

⭐ Support

If you find this library useful, please give it a star ⭐ on GitHub — it helps others discover and support the project!

Keywords

• react
• hooks
• react-hooks
• custom-hooks
• typescript
• utility-hooks
• ui-hooks
• performance-hooks
• frontend
• react-library