@shined/react-use

A New Programming Paradigm to Reshape React Development.

## 🎉 Introduction `@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](https://vueuse.org/), while also drawing from [react-use](https://github.com/streamich/react-use), [ahooks](https://ahooks.js.org/), 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](https://sheinsight.github.io/react-use/docs/features/dependencies-collection), [ElementTarget](https://sheinsight.github.io/react-use/docs/features/element-target), [Ref Getter](https://sheinsight.github.io/react-use/docs/features/ref-getter), [Pausable](https://sheinsight.github.io/react-use/docs/features/pausable), and [more](https://sheinsight.github.io/react-use/docs/introduction#features). - **Tree-shakable**: Designed and delivered with [ESM](https://nodejs.org/api/esm.html), import only what you need. - **Interactive Documentation**: Interactive documentation with live examples and [Playground](https://react-online.vercel.app/#code=eNqNk02P0zAQhu%2F5FUMvSaS6aVdFWq2aClhx4AAHTiDEIbEnbYQ%2FItthE6L8d6ZJ191PaS%2F22H7nmfGMXavGWA8DcIuFx%2B%2FGeBihskZBTDvcM2FUxmWN2sdRULcOvxoalifr1rTaow1%2BH9yx1iiy2Z8EcRRVrea%2BNho%2BNk2SwhABcKPdidUtoSffPECTNJz%2B4if2EghEzu73rDoHTNZpREqLvrUaEjIBdqL%2BC1wWzn0rFObxHataKaEy2jNltIGDrQU0suDIKISnazFOA9p4PwFeQrxfr5sOPHb32tm%2B6mRweu6mSLCO98%2BKsctI%2BLrbRN52cg5RqJKiqZ5dx%2FsfNzB04xJ%2B0tyPTzFl673RYU0FDMyFpXoJFFAaKwg3T8wZSaU4L%2BZATce20PTsavEAZPStrPmffKC%2B5fv7VqxqzZNNOgbhJReAqUGU5tS9i2SXzVmGSj%2B8w5NCLO7Yhop%2BZI5eJmooD3OO2fYaipJybz3CP7ZZgPO9xHwYQGJFQTtgsIFxhOx18pl5nEK8gexNc0OP9DE4ZJ9GYxRd%2Fk8iDG8VvZPVAf1niSfzU%2F9FJLGl0zh9l64sUj9ssqPPQLQ0%2Bg%2BbPxib). - **Lightweight**: Boasts [zero dependencies](https://github.com/sheinsight/react-use/blob/main/package.json). - **SSR-friendly**: Ensures that all Hooks are compatible with Server-side Rendering (SSR). - **First-class TypeScript Support**: Written in [TypeScript](https://www.typescriptlang.org/) with well-named type definitions and [JSDoc](https://jsdoc.app/) Comment. - **~~Comprehensive Testing~~**: (Coming soon...) Visit the [Get Started](https://sheinsight.github.io/react-use/docs/get-started) section to explore how it can be integrated into your project. ## ⚡️ Optimizations - **Safe State**: Implements a [safe state](https://sheinsight.github.io/react-use/docs/optimization/safe-state) strategy for all stateful Hooks, reducing bugs and unwanted behaviors. - **Stable functions**: Every exported function benefits from [stabilization](https://sheinsight.github.io/react-use/docs/optimization/stabilization) by default. - **Latest State**: Avoids the expired closure issues by using [latest](https://sheinsight.github.io/react-use/docs/optimization/latest-state) state internally. - **Reduced Unnecessary Rerenders**: Use [Pausable](https://sheinsight.github.io/react-use/docs/features/pausable) instance to control the behavior of some Hooks optionally. ## 🪪 License MIT © @shined