use-memo-one

What is use-memo-one?

The use-memo-one package provides hooks for React that allow you to memoize values and functions without breaking the referential equality guarantee, which can be crucial for performance optimizations, especially in React components that rely heavily on reference equality to prevent unnecessary re-renders.

What are use-memo-one's main functionalities?

useMemoOne

useMemoOne allows you to memoize an expensive computation and only recompute it when one of the dependencies has changed. This is similar to React's useMemo but with a stable cache.

import { useMemoOne } from 'use-memo-one';

function MyComponent(props) {
  const memoizedValue = useMemoOne(() => computeExpensiveValue(props.id), [props.id]);
  return <div>{memoizedValue}</div>;
}

useCallbackOne

useCallbackOne allows you to memoize a callback function and only recompute it when one of the dependencies has changed, ensuring that the function's identity remains stable across renders unless its dependencies change.

import { useCallbackOne } from 'use-memo-one';

function MyComponent({ onClick }) {
  const memoizedCallback = useCallbackOne(() => {
    console.log('Button clicked');
    onClick();
  }, [onClick]);
  return <button onClick={memoizedCallback}>Click me</button>;
}

Other packages similar to use-memo-one

react-use

This package offers a wide range of hooks, including useMemo and useCallback functionalities similar to use-memo-one. However, react-use provides a broader set of hooks for various purposes, which might be beneficial for developers looking for a comprehensive solution.

memoize-one

memoize-one provides a simple memoization of a function, similar to the useCallbackOne feature of use-memo-one. It ensures that a function with the same arguments returns the same result, helping to prevent unnecessary recalculations. However, it does not hook into the React lifecycle directly.

README

useMemoOne

useMemo and useCallback with semantic guarantee (stable references)

Background

useMemo and useCallback cache the most recent result. However, this cache can be destroyed by React when it wants to:

You may rely on useMemo as a performance optimization, not as a semantic guarantee. In the future, React may choose to “forget” some previously memoized values and recalculate them on next render, e.g. to free memory for offscreen components. Write your code so that it still works without useMemo — and then add it to optimize performance. - React docs

useMemoOne and useCallbackOne are concurrent mode friendly alternatives to useMemo and useCallback that do provide semantic guarantee. What this means is that you will always get the same reference for a memoized so long as there is no input change.

Install

# npm
npm install use-memo-one --save
# yarn
yarn add use-memo-one

Usage

import { useMemoOne, useCallbackOne } from 'use-memo-one';

function App(props) {
  const {name, age } = props;
  const value = useMemoOne(() => ({hello: name}), [name]);
  const getAge = useCallbackOne(() => age, [age])

  // ...
}