7 Custom React Hooks You Probably Need in Your Project

Useful hooks for extracting and reusing react code and JS logic

Hooks are great for extracting logic into reusable functions. There are a lot of npm packages offering built-in custom hooks. I personally don’t like to install some npm modules just to get the functionality that I can write myself with barely ten lines of code.

I’ve compiled a list of seven useful common hooks that I’ve made for use in my projects.

1. useToggle

This hook is pretty common, and it is used for toggling a boolean value between true and false. It is useful when we want to show/hide modal or open/close side menu. A basic version of this hook looks like this:

Example

import useToggle from './useToggle';
const App = () => {
  const [show, toggleShow] = useToggle();
  return (
    <Modal show={show} onClose={toggleShow}>
      <h1>Hello there</h1>
    </Modal>
  );
}

This hook can be slightly modified for use cases when we want to show/hide a modal for a row in a table. I’ve added a customToggle method which sets the value to a given value instead of toggling the previous state value.

Use case

Let’s say we have a bunch of rows in a table and we want to give an option for deleting a row. Clicking the delete button should open a confirmation modal.

For this type of functionality, we need two variables in the state. First, to hold a boolean value for determining whether to show delete confirmation modal and second to hold the row id for which delete modal has to be shown.