react-cool-hooks

Helpful hooks for React.

TOC

• useOnce()
• useFunction()
• usePropState()
• useToggleState()
• useAbort()
• useArray()
• useMap() & useSet()
• useMountEffect() & useUnmountEffect

useOnce()

This hook is a safe alternative for useMemo(factory, []). According to React documentation, useMemo() doesn't guarantee that hook result is stable. So, for cases when you need to create something once and till component unmount use hook useOnce(factory):

import { useOnce } from 'react-cool-hooks';

export function MyComponent() {
  const stableState = useOnce(() => {
    // here I'm making my state and returning it
    // this function will be called only once
  });
  
  // I can be sure that MemoizedComponent receives 
  // always the same value for data prop
  return (
    <MemoizedComponent data={stableState}/>
  );
}

useFunction()

This hook provides stable function that invokes passed callback. It doesn't require dependencies, because callback is always up-to-date. Use it as alternative for useCallback():

import { useState } from 'react';
import { useFunction } from 'react-cool-hooks';

export function MyComponent() {
  const [counter, setCounter] = useState(0);
  
  const incrementCounter = useFunction(() => {
    setCounter(currentCounter => currentCounter++);
  });
  
  const doSomethingWithCounter = useFunction(data => {
    // here I can use received data from child component
    // and I don't need specify dependencies to have access 
    // to latest value of counter, it's always up-to-date.
  });
  
  // incrementCounter and doSomethingWithCounter are stable and always the same
  
  return (
    <>
      <button type="button" onClick={incrementCounter}>Increment</button>
      <MemoizedComponent onHandle={doSomethingWithCounter}/>
    </>
  );
}

usePropState()

May be as alternative for useState() when you need update your state by passing updated value.

import { useState } from 'react';
import { usePropState } from 'react-cool-hooks';

export function MyComponent({ someProp }) {
  // nativeState may be updated only by calling setNativeState();
  const [nativeState, setNativeState] = useState(someProp);
  
  // coolState may be updated by setCoolState() and by passing updated value of someProp
  const [coolState, setCoolState] = usePropState(someProp);
  
  return (
    <SomeJSX/>
  );
}

For a case when you need to create some heavy calculations for state initialization, you may pass stateFactory as second argument:

import { usePropState } from 'react-cool-hooks';

export function MyComponent({ someProp }) {
  const [state, setState] = usePropState(someProp, actualValueOfSomeProp => {
    // this factory will ne invoked every time usePropState() receives new value of someProp
    // init your state and return it
  });
  
  return (
    <SomeJSX/>
  );
}

useToggleState()

An easy way to control boolean state. Hook allows to toggle boolean value or strictly assigns passed value.

import { useToggleState } from 'react-cool-hooks';

export function MyComponent() {
  const [state, toggleState] = useToggleState(false);
  
  return (
    <Checkbox checked={state} onChange={() => toggleState()}/>
  );
}

useAbort()

Provides an instance of AbortSignal and a function, that triggers manual abort with custom reason. By default, triggers abort on component unmount.

import { useAbort, ABORT_REASON_UNMOUNT } from 'react-cool-hooks';
import { useEffect } from 'react';
import { useFunction } from './useFunction';

export function MyComponent() {
  const [abortSignal, abort] = useAbort();

  const manualAbort = useFunction(() => abort('MANUAL'));

  useEffect(() => {
    fetch('/resource', { signal: abortSignal }).then(
      (data) => { /* handle data */ },
      (reason) => {
        if (reason === ABORT_REASON_UNMOUNT) {
          // fetch aborted by unmounting
        }
        
        if (reason === 'MANUAL') {
          // fetch was aborted manually
        }
      },
    );
  }, []);

  return (
    <button onClick={manualAbort}/>
  );
}

Pass true into hook, and it will not abort on unmount.

import { useAbort, ABORT_REASON_UNMOUNT } from 'react-cool-hooks';
import { useEffect } from 'react';
import { useFunction } from './useFunction';

export function MyComponent() {
  const [abortSignal, abort] = useAbort(true);

  useEffect(() => {
    fetch('/resource', { signal: abortSignal }).then(
      (data) => { /* handle data */ },
      (reason) => {
        if (reason === ABORT_REASON_UNMOUNT) {
          // never happens because hook was invoked with true
        }
      },
    );
  }, []);

  return (
    <SomeJSX/>
  );
}

useArray()

This hook provides helpful tools when you want to use an array as component state. Hook may accept initial value as any Iterable of factory that returns an Iterable. It returns an object with next members:

import { useArray } from 'react-cool-hooks';

export function MyComponent() {
  const { state, provide, update } = useArray();
  // state - actual state of array
  // provide - a function that returns an array or other computed value
  // update - a function that updates an array and triggers rerender
}

• state - It is an array itself. You can directly use it in render;
• provide - Stable function that never changes. By invoking without arguments it returns actual state of array. It's suitable to use it in callbacks because it doesn't require to be listed in dependencies array. Additionally, it may receive a pure function that accept actual array and returns something else. In this case provide function returns that value.

  provide(); // returns an array
  provide((arr) => arr.at(-1)); // returns last element of array
  // you can define a set of widely used providers and pass them by name
  provide(currentLenght);
  provide(atIndex(3));
  provide(byId(1234));

• update - Stable function that never changes. This function updates a state. It may accept a whole new array, or it may accept function. If passed function returns new array this array will be a new state. If function returns same array or void, update automatically creates new state from existing.

  update([1, 2]); // [1, 2] will be new value of state
  update(() => [1, 2]); // [1, 2] will be new value of state
  update((arr) => void arr.push(3)); // new state will be created automatically
  update((arr) => arr.sort()); // new state will be created automatically

useMap() and useSet()

Helpful hooks for cases when you want to use Map or Set collections as component state. Hooks may accept initial value as Iterable of factory that returns an Iterable. Both hooks return an objects with stable functions that allows you update state in a way very similar to native methods of these collections.

useMountEffect() and useUnmountEffect()

Shorthands for basic useEffect() usages for component lifecycle.

License

MIT