ahooks 3.0 is coming! a high-quality and reliable React Hooks library!

砖家 — Wed, 15 Dec 2021 12:53:55 +0000

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"

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

DEV Community: 砖家

ahooks 3.0 is coming! a high-quality and reliable React Hooks library!

Support SSR

New useRequest

Special handling of functions to avoid closure problems

More

Lastly