ahooks is an open-source React Hooks library that encapsulates a large number of useful Hooks. In the current React project development, a useful React Hooks library is indispensable, hope ahooks can be your choice.
Since the first version of ahooks (umi hooks) was released in August 2019, it has undergone 2 years of development. and has been recognized by many developers in the community. The current achievements of ahooks 2.0 mainly include:
- Used by thousands of front-end applications within Alibaba Group
- Developed 60+ Hooks
- npm & tnpm weekly downloads 70k+
- GitHub star 7.4k
In the development process of the past two years, with a deeper understanding of React Hooks, we can see many deficiencies in the design of ahooks 2.0. In this context, we decided to develop version 3.0.
The goal of ahooks 3.0 is to build a high-quality and reliable React Hooks library. We hope to become a stable and fundamental dependency like lodash. Compared with 2.0, it has the following advantages:
- Fully support SSR
- New useRequest
- All output function references are fixed to avoid closure problems
- DOM Hooks support dynamic target
- More appropriate API design
- Solved the problem in Strict Mode
- Solved the problem in react-refresh (HRM) mode
- Added more Hooks
- Fixed many known issues
Support SSR
React Hooks generally encounter two problems, "DOM/BOM missing" and "useLayoutEffect warning" in SSR scenarios. ahooks v3.0 completely solves these two problems, and you can safely use ahooks in SSR scenarios with no worries.
For more information, please refer to "React Hooks & SSR"
New useRequest
useRequest is the Hook with the highest usage of ahooks and also the Hook with the most issues. The biggest problem of the previous useRequest is:
- Code splitting is inappropriate, all features are mixed in one file. It's very complicated to make changes to the code.
- Some features were not fully researched before they were released, resulting in inappropriately designed features that could not be dropped after being released.
- The logic of pagination and loadMore were combined together, resulting in super complex TS types.
ahooks v3.0 completely rewrote useRequest:
- Organized the source code through a plug-in pattern, the core code is extremely simple, all advanced features are implemented with plug-ins.
- Carefully researched all the features provided to ensure that the released features are the optimal solutions. Will progressively add new features which are still under research.
- All options support dynamic changes
- Removed the pagination and loadMore logic, separated out some other Hooks to provide corresponding features.
- Avoid TS type overload, it's more convenient for encapsulating more advanced Hooks based on useRequest.
- Solve a large number of remaining issues.
For more information, please refer to "New useRequest"
Special handling of functions to avoid closure problems
ahooks v3 tries its best to help everyone avoid the closure problem by specially processing the input and output functions. I think this ability is a more radical aspect of ahooks, but it does provide users with a very good experience.
1.All the output functions of ahooks, the references are stable
const [state, setState] = useState();
As we all know, the reference of the setState function returned by React.useState is fixed, and there is no need to consider weird problems when using it, and there is no need to put setState in the dependencies of other Hooks.
All functions returned by ahooks v3.0 Hooks have the same characteristics as setState, the reference will not change, just feel free to use it.
2.For all user input functions, always use the latest one
For the received function, ahooks v3 will do a special process to ensure that the function called each time is always the latest.
const [state, setState] = useState();
useInterval(() => {
console.log(state);
}, 1000);
For example, in the above example, the function called by useInterval at any time is always the latest, that is, the state is always the latest.
For more information, please refer to "ahooks function specification"
More
- DOM Hooks support the dynamic target. For related documents, please refer to "Hooks of DOM specification"
- v3 fixes some problems in strict mode. Refer to "React Hooks & strict mode"
- v3 fixes some problems in react-refresh (HRM) mode. Refer to "React Hooks & react-refresh (HMR)"
For more changes, please refer to "v2 to v3"
Lastly
The slogan of ahooks v3.0 is "a high-quality and reliable React Hooks library". This is also the goal for ahooks. Hope ahooks will become one of the essential fundamental libraries in everyone's toolkit.
Thanks to the contributors and users of ahooks! Welcome to try v3.0!
$ npm install --save ahooks@next
# or
$ yarn add ahooks@next
- Document: https://ahooks.js.org
- Source code: https://github.com/alibaba/hooks
Top comments (1)
You can also use scriptkavi/hooks
It is easy to use and pattern is similar to shadcn/ui.