#🏃 Get Started

@shined/react-use aims to reshape the new programming paradigm of React development. It enhances development efficiency, fosters better programming habits, and reduces the reliance on useEffect and useState by offering a multitude of high-quality, semantic Hooks. It encourages developers to gradually adapt to a React development (programming) paradigm that prioritizes 'Hooks first'.

Fundamentally, it's a SSR (Server-Side Rendering) friendly, comprehensive, and highly optimized React Hooks library that provides flexible and efficient Hook solutions, entirely developed in TypeScript, and comes with interactive documentation filled with rich examples 🔥.

It's primarily inspired by VueUse, while also drawing from react-use, ahooks, and many other outstanding libraries within the community. Special thanks to the open-source community, especially the authors of the aforementioned libraries, for their exceptional work and inspiration.

#🚀 Features

• Flexibility: Dependencies Collection、ElementTarget, Ref Getter, Pausable, and more.
• Tree-shakable: Designed and delivered with ESM, import only what you need.
• Interactive Documentation: Interactive documentation with live examples and Playground.
• Lightweight: Boasts zero dependencies.
• SSR-friendly: Ensures that all Hooks are compatible with Server-side Rendering (SSR).
• First-class TypeScript Support: Written in TypeScript with well-named type definitions and JSDoc Comment.
• Comprehensive Testing: Each Hook is rigorously tested with Vitest to ensure reliability and stability.

Visit the Get Started section to explore how it can be integrated into your project.

#⚡️ Optimizations

• Safe State: Implements a safe state strategy for all stateful Hooks, reducing bugs and unwanted behaviors.
• Stable functions: Every exported function benefits from stabilization by default.
• Latest State: Avoids the expired closure issues by using latest state internally.
• Reduced Unnecessary Rerenders: Use Pausable instance to control the behavior of some Hooks optionally.

#📦 Installation

Install using your favorite package manager:

npm install @shined/react-use

#🎨 Usage Examples

Below is an example of how to use the useAsyncFn Hook:

function App() {
  const { loading, error, run } = useAsyncFn(fetchData)
  return (
    <>
      <div>{data}</div>
      <button onClick={run} disabled={loading}>
        Fetch
      </button>
    </>
  )
}

Next, you can proceed to the Usage Guide to learn how to improve existing code, or visit the Hooks List to see all available Hooks.