Viki 写东西的地方


[Open Source] Modern and high-quality React Hooks library



@shined/react-use is a React Hooks library that is SSR (Server-Side Rendering) friendly, comprehensive, and highly optimized, providing flexible and efficient hook solutions. It is developed entirely in TypeScript and comes with interactive documentation 🔥 that includes rich examples.

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

🚀 Features#

  • Flexibility: Features include ElementTarget, Ref Getter, Pausable, and more.
  • Tree-shakable optimization: Designed and delivered using ESM, only import what you need.
  • Interactive documentation: Comes with live examples and a Playground.
  • Lightweight: Proudly declares zero dependencies.
  • SSR friendly: Ensures compatibility of all hooks with Server-Side Rendering (SSR).
  • First-class TypeScript support: Written in TypeScript, with well-named type definitions and JSDoc comments.
  • Comprehensive testing: (Coming soon...)

⚡️ Optimization#

  • Safe state: Implements a safe state strategy for all stateful hooks, reducing bugs and unwanted behavior.
  • Function stability: By default, each exported function benefits from stabilization, one of the internal rendering optimizations.
  • Latest state: Avoids stale closure issues by using latest state internally.
  • Reduced unnecessary re-renders: Uses Pausable instances to optionally control the behavior of certain hooks.


Modern technology selection, standardized repository configuration#

  1. Mainstream pnpm + monorepo architecture, source code coexists with documentation and example projects.
  2. Use .node-version and packageManager to lock Node.js and package manager versions.
  3. Use tsup for source code building, powered by esbuild, lightweight and fast.
  4. Use Biome for project linting and formatting, a modern tool based on Rust.
  5. Use Vitest for testing, modern and efficient, with a focus on ESM.
  6. Use Docusaurus for documentation writing + UnoCSS for documentation demo.
  7. Configure GitHub Actions, including CI (lint), Release, and GitHub Pages processes standardization.
  8. Configure npm's provenance publishing authentication to avoid supply chain attacks.
  9. Use bumpp for version control, a one-stop solution for version bumping, tagging, committing, and pushing.
  10. Use conventional-changelog-cli to automatically generate changelog (
  11. Use changelogithub to standardize releases (generate and publish GitHub Releases based on commit messages).
  12. Standardize package.json, including but not limited to exports, sideEffects, typesVersions, etc.
  13. Configure clean-pkg-json to execute before publishing, ensuring a clean and standardized package.json.
  14. ...

Solid foundation for underlying, basic Hooks, while serving upper-level features#

  1. useSafeState => Implements a state behavior that is safe and in line with official recommendations, with additional support for deep compare.
  2. useStableFn => Stable function references for exported Hooks, one of the internal rendering optimizations.
  3. useTargetElement => Unified handling of all ElementTarget parameters for simplified element targeting.
  4. usePausable => Supports the pausable feature at the underlying level of various Hooks, one of the optional internal rendering optimizations.
  5. useSupported => Unified accessibility status for APIs with compatibility issues.
  6. useEventListener => Handles event operations for various instances that conform to the event interface.
  7. useLatest => Avoids stale closure issues by applying a stable Ref.
  8. useEffect-derived Hooks (create-xxx-effect) as underlying dependencies.
  9. ...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.