Core Hooks

A small collection of commonly-used custom React Hooks.

Motivation

I regularly find myself reusing the same custom hooks in all of my projects, so I abstracted them into a library.

This collection of hooks is intended to remain reasonably sized.

Installation

Install using npm:

npm install core-hooks

or yarn:

yarn add core-hooks

Hooks

• useConstant
• useOnChange
• usePrevious
• useIsMounted
• useLatestRef
• useMountTransition

useConstant( valueFn )

A hook that guarantees a constant value. Similar to useMemo, except with the guarantee that the cached value will never be purged.

Use useMemo when your application will not break if the value is recomputed. Use useConstant when the value must never change.

import { useConstant } from 'core-hooks';

useConstant(() => createStore());

useOnChange( value, callback, [comparator] )

A hook that calls callback anytime that value changes. callback is called with two arguments: (currentValue, previousValue).

Pass a comparator function to customize the comparison. It is called with two values, currentValue and previousValue. The default comparison is a strict equals (===).

This hook does not return any value.

import { useOnChange } from 'core-hooks';

useOnChange(isVisible, (isVisible, wasVisible) => {
  if (isVisible && !wasVisible) {
    console.log('It just became visible.');
  }
});

usePrevious( value )

This hook returns the previous value of value.

import { usePrevious } from 'core-hooks';

const prevState = usePrevious(state);

Note: if you wish to detect when a value changes, then you may want to consider useOnChange instead.

useIsMounted()

Returns a Boolean representing whether or not the component has mounted.

import { useIsMounted } from 'core-hooks';

const isMounted = useIsMounted();

useLatestRef( value )

Returns an up-to-date ref of value. This is useful when you need to access value in side effect callbacks in your component, such as setTimeout, setInterval, or user input events like key presses.

import { useState } from 'react';
import { useLatestRef } from 'core-hooks';

const [state, setState] = useState();
const stateRef = useLatestRef(state);

useMountTransition( options )

A hook that allows you to create transitions between two states. Common use cases are:

• General two-state transitions (such as open and close)
• Animated mounting/unmounting of a single component

The API was designed with both CSS and JS transitions in mind.

options

• shouldBeMounted: A Boolean representing which state the element is in
• transitionDurationMs: Optional. How long the transition between the states lasts
• onEnter: Optional. A callback that is called once the enter transition is complete
• onLeave: Optional. A callback that is called once the leave transition is complete
• onEnteringTimeout: Optional. Pass true when using CSS Transitions. This creates a delay between the shouldMount and useActiveClass booleans being flipped to true, so that your mount CSS transition animates properly. If you are not using CSS transitions, then you do not need to pass this option.

The following example demonstrates how you can use this hook for animating a component that is being mounted.

import { useMountTransition } from 'core-hooks';
import classnames from 'classnames';

function MyComponent({ renderChildren }) {
  const [shouldMount, useActiveClass] = useMountTransition({
    shouldBeMounted: renderChildren,
    transitionDurationMs: 500,
    onEnteringTimeout: true,
  });

  return (
    <>
      {shouldMount && (
        <div
          className={classnames('myDiv', {
            'myDiv-active': useActiveClass,
          })}>
          This div animates in and out
        </div>
      )}
    </>
  );
}

Note: This can be considered a Hook replacement of the react-transition-group Transition component, but not for the TransitionGroup component.