Top React Hooks — Data Types

Hooks contains our logic code in our React app.

We can create our own hooks and use hooks provided by other people.

In this article, we’ll look at some useful React hooks.

react-use

The react-use library is a big library with many handy hooks.

useToggle

The useToggle hook lets us create a boolean state that we can toggle with a function.

To use it, we can write:

import React from "react";
import { useToggle } from "react-use";

export default function App() {
  const [on, toggle] = useToggle(true);

  return (
    <div>
      <div>{on.toString()}</div>
      <button onClick={toggle}>toggle</button>
      <button onClick={() => toggle(true)}>true</button>
      <button onClick={() => toggle(false)}>false</button>
    </div>
  );
}

useToggle takes an argument for the initial value of the toggle.

It returns the on state with the boolean.

And toggle lets us toggle the value or set on with a specific value.

useCounter

The useCounter hook lets us create a numeric state with functions to set or reset the value.

For instance, we can write:

import React from "react";
import { useCounter } from "react-use";

export default function App() {
  const [val, { inc, dec, set, reset }] = useCounter(1);

  return (
    <div>
      <div>{val}</div>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => set(100)}>Set 100</button>
    </div>
  );
}

We call the useCounter hook to return an array with various things.

The argument is the initial value.

val has the current value of the number state.

inc is the function to increment val .

dec is the function to decrement val .

set is the function to set val to a specific value.

reset resets val to the initial value.

We can also set the maximum and minimum values that val can take.

For example, we can write:

import React from "react";
import { useCounter } from "react-use";

export default function App() {
  const [val, { inc, dec, set, reset }] = useCounter(1, 10, 1);

  return (
    <div>
      <div>{val}</div>
      <button onClick={() => inc()}>Increment</button>
      <button onClick={() => dec()}>Decrement</button>
      <button onClick={() => reset()}>Reset</button>
      <button onClick={() => set(9)}>Set 9</button>
    </div>
  );
}

The 2nd argument of useCounter is the maximum value of val .

The 3rd argument is the minimum value of val that it can take.

useList

The useList hook lets us create a state from an array and manipulate it.

To use it, we can write:

import React from "react";
import { useList } from "react-use";

export default function App() {
  const [
    list,
    {
      set,
      push,
      updateAt,
      insertAt,
      update,
      updateFirst,
      upsert,
      sort,
      filter,
      removeAt,
      clear,
      reset
    }
  ] = useList([1, 2, 3, 4, 5]);

  return (
    <div>
      <button onClick={() => set([1, 2, 3])}>Set to [1, 2, 3]</button>
      <button onClick={() => push(Math.floor(100 * Math.random()))}>
        Push
      </button>
      <button onClick={() => updateAt(1, Math.floor(100 * Math.random()))}>
        Update
      </button>
      <button onClick={() => removeAt(1)}>Remove index 1</button>
      <button onClick={() => filter(item => item % 2 === 0)}>
        Filter even values
      </button>
      <button onClick={() => sort((a, b) => a - b)}>Sort ascending</button>
      <button onClick={() => sort((a, b) => b - a)}>Sort descending</button>
      <button onClick={clear}>Clear</button>
      <button onClick={reset}>Reset</button>
      <pre>{JSON.stringify(list, null, 2)}</pre>
    </div>
  );
}

We call the useList hook with an initial array as the argument.

It returns an object with various properties and the array itself.

list has the value of the array.

set lets us set the array to a different array.

push lets us append an entry to the list array.

insertAt lets us insert an element to the list array.

update lets us update a list entry.

updateFirst updates the first entry of list.

upsert lets us insert or update an entry of list.

sort lets us sort our the list array.

filter filters the the list array.

removeAt removes a list entry with the given index.

clear empties the list array.

reset resets the list array to the initial value.

Conclusion

The react-use library lets us create a toggle, number, and list state we can manipulate easily.