Don’t reinvent the wheel! Or utility libraries for Vue and React applications

Introduction

Many developers, when it comes to standard web application functionality, for example: storing and managing boolean values, handling key pressed or creating stepper, often try to find how to do this or that function and more often they find a way to implement the functionality from scratch.

There’s no need in reinventing the wheel!

Creators and users of libraries of reusable functions for various frameworks (React, vue etc.) look at this approach with such a reaction.

For Vue — it is, for example, vueuse. (vue utility functions)

For React, the best one today is the brand new and actively supported reactuse (for react hooks)

What problem do these libraries solve?

They are needed to make life less challenging for developers. Prepare in advance all possible functions that developer may need in his work. If he will use a ready-made package, he will at least save his time, and at most minimize the probability of his error or bug found in the code, because each function is tested separately. The use case is actually huge. With the help of such libraries you can, for example:

1. use web-sockets
2. make queries
3. detect user’s geolocation
4. use localStorage
5. easily create modal windows

And that’s just a small part of all the possible cases.

Why is VueUse cool?

VueUse is one of the most popular such libraries for vue. After all, it provides the most basic reusable functionality. Some people think that it is a standard when building Vue applications, and without it it is impossible to make it. It is hard to disagree, the library consists of more than two hundred functions and follows the ideology described above.

Best alternative for React

While praising vueuse as the best way to perfectly realize a great idea, we should not forget about the top 1 js library/framework — React. And here the situation was more unpleasent. After all, there is no established, reliable, extensive and the only library for React. There were some attempts from different developers, but in one of them there are too few hooks (in React they are hooks, yeah), somewhere there are hooks built using an unprocessed api.

To improve the situation, and as an alternative to vueuse, but in react, came reactuse.

Let’s take, for example, and try to create list management with the help of a library and using vanilla react only.

import { useList } from "@siberiacancode/reactuse";

function App() {
  const { value, set, push, removeAt, insertAt, updateAt, clear, reset } =
    useList(["Pink Floyd", "Led Zeppelin"]);
}
export default App;

We get value (array value), set (function to assign another array value), push (function to add values to the array), removeAt (delete by index), updateAt (change value by index), clear (clear the array), reset (reset to default value)
Now the code to get all these states and functions on vanilla react:

const [value, setValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const [initialValue] = useState<string[]>(["Pink Floyd", "Led Zeppelin"]);
  const set = (newValue: string[]) => {
    setValue(newValue);
  };
  const push = (valueToPush: string) => {
    setValue((prevArray) => [...prevArray, valueToPush]);
  };
  const removeAt = (index: number) => {
    setValue((prevArray) => [
      ...prevArray.slice(0, index),
      ...prevArray.slice(index + 1),
    ]);
  };
  const insertAt = (index: number, item: "string") =>
    setValue((l) => [...l.slice(0, index), item, ...l.slice(index)]);

  const updateAt = (index: number, newValue: string) => {
    setValue((prevList) =>
      prevList.map((element, index) => (index === index ? newValue : element))
    );
  };

  const clear = () => setValue([]);
  const reset = () => setValue(initialValue);

And we get exactly the same methods and state. And the code is much more tiny and simpler

The library is actively maintained, new hooks are added, there is a convenient website with documentation, the hooks use simple sources and have a more elaborate API. Now there are more than 80 hooks implemented. I also want to note that there are absolutely new implementations, which I have not seen anywhere else:

• usePaint — for creating canvas for drawing on it. You set the canvas, and the hook allows you to draw on it, adjust the size of the brush, color, opacity and the status “draw” or “now draw”
• useStopwatch — for creating stopwatches
• useEyeDropper — to use the dropper for color selection
• huge amount of hooks fow working with user device or browser api (useMemory, useOperatingSystem, useClipboard, useBrowserLanguage, useHash and so on)

Conclusion

Such libraries should become a development standard, just because they allow you not to stay focused on the small details that were already invented a long time ago, you just need to import them in and use them.

reactuse links

npm — github

The above is the detailed content of Don’t reinvent the wheel! Or utility libraries for Vue and React applications. For more information, please follow other related articles on the PHP Chinese website!