@restart/hooks

What is @restart/hooks?

The @restart/hooks npm package provides a collection of reusable React hooks that help manage various aspects of a React application, such as state, effects, and lifecycle events. These hooks are designed to simplify common patterns and abstract complex behaviors into reusable functions.

What are @restart/hooks's main functionalities?

useStatefulRef

This hook creates a mutable ref object that holds a value which can be changed without causing a component re-render, similar to useRef but with a stateful value.

import { useStatefulRef } from '@restart/hooks';

function MyComponent() {
  const ref = useStatefulRef(null);

  // ref.current is now mutable and can be updated without causing a re-render
  return <div ref={ref}>Hello, world!</div>;
}

useEventCallback

This hook ensures that a callback function remains stable between renders, preventing unnecessary re-renders of child components that might be sensitive to prop changes.

import { useEventCallback } from '@restart/hooks';

function MyComponent({ onClick }) {
  const stableOnClick = useEventCallback(onClick);

  // stableOnClick will not change between renders, preventing unnecessary re-renders of child components
  return <button onClick={stableOnClick}>Click me</button>;
}

useMounted

This hook provides a function to check if the component is still mounted before performing any actions that may result in a state update, which can help avoid memory leaks and errors.

import { useMounted } from '@restart/hooks';

function MyComponent() {
  const isMounted = useMounted();

  useEffect(() => {
    const timer = setTimeout(() => {
      if (isMounted()) {
        // Perform some action only if the component is still mounted
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [isMounted]);

  return <div>Timer example</div>;
}

Other packages similar to @restart/hooks

react-use

React-use is a comprehensive collection of essential React hooks. It covers a wide range of functionality, from state and lifecycle management to more complex tasks like sensor data and form state management. Compared to @restart/hooks, react-use offers a broader set of hooks, which might be more suitable for developers looking for a one-stop-shop for hooks.

use-hooks

Use-hooks is another library that provides a set of reusable hooks for common React patterns. While it offers similar functionalities to @restart/hooks, the focus of use-hooks is on simplicity and ease of understanding, which might make it a better choice for beginners or those who prefer a more straightforward approach.

beautiful-react-hooks

Beautiful-react-hooks is a collection of hooks with a focus on simplicity and beauty in the API design. It aims to provide an intuitive and pleasant developer experience. While it shares commonalities with @restart/hooks in terms of providing reusable logic, beautiful-react-hooks emphasizes a fluent and easy-to-read API.

README

@restart/hooks

A set of utility and general-purpose React hooks.

Install

npm install @restart/hooks

Usage

import useInterval from '@restart/hooks/useInterval'

useInterval(() => loop(), 300, false)

Changelog

0.4.6 (2022-04-01)

Bug Fixes

• useMounted: adjust to work with strict effects (#70) (8deba46)