React Hooks Essentials

A small collection of React hooks, designed to make general hooks usage simpler.

useMethod()

An alternative to React's useCallback(), without the fuss of dependencies or volatile function references.

const myFunc = useMethod((...args) => {
    // do stuff
});

// ...

const x = myFunc(...args); // Acts exactly like the input function

Use as you would useCallback(), but without the dependencies array. The returned function will do exactly as the inner function would, but wraps it in such a way that the output function never changes reference, but always has the up-to-date functionality.

As a result, the function doesn't need a dependency array, and doesn't need to be included in those of other callbacks, effects, etc.

Example

Vs. useCallback() and unwrapped functions

| | useMethod | useCallback | Inline function | | ----------------------------------- | :----------------: | :--------------: | :--------------: | | Requires deps array | ✘ | ✔ | ✘ | | Changes reference | Never | When deps change | Every update | | Needs to be included in deps arrays | ✘ | ✔ | ✔ (but not safe) | | Safe to include in deps arrays | ✔ (but not needed) | ✔ | ✘ | | Safe to use in async code | ✔ | ✘ | ✘ |

When not to use it

• When you specifically want the function to change only when the deps change (use useCallback()).

useGetter()

Returns a getter function for the input value.

const getValue = useGetter(props.value);

// ...

const x = getValue(); // Up-to-date value of props.value.

The returned function, like those returned by useMethod(), is single-instance, meaning it doesn't need to be included in dependencies arrays, and is safe to use in asynchronous code.

useObject()

Returns a single-instance object, which is always updated with the contents of its input.

As with the other hooks, the returned object is updated rather than replaced, so it does not need to be included in dependency arrays, and is safe to use in asynchronous code.

This can also be useful for creating an object to be passed down through the Context API, if the consumers don't need to be notified of changes.

const obj = useObject({
    a: someVolatileValue,
    b: anotherVolatileValue
});

// ...

const x = obj.a; // The up-to-date value of someVolatileValue

useSelf()

Provides single-instance functions related to the component lifecycle.

Currently this is only isMounted().

self.isMounted()

A function which indicates whether the containing component is still mounted.

const self = useSelf();

// ...

if (self.isMounted()) {
    // do stuff that's only safe while mounted (e.g. setState())
}