unicorn-utterances/content/blog/explaining-reacts-cache-function/index.md

title, description, published, authors, tags, attached, license

title	description	published	authors	tags	attached	license
Explaining React's cache Function		2023-12-17T21:52:59.284Z	crutchcorn	react webdev javascript		cc-by-4

Some warning about how this is an experimental API and may change in the future

1. Compare/contrast React useMemo/useCallback/memo/cache
2. Show how cache persists between functions

import { createRoot } from "react-dom/client";
import { cache, useReducer, useState } from "react";

const test = cache((id) => {
	alert(id);
});

function App() {
	const [counter, setCounter] = useState(0);
	const [_, rerender] = useReducer(() => ({}), {});
	test(counter);
	return (
		<div>
			<button onClick={() => setCounter((v) => v + 1)}>Add to {counter}</button>
			<button onClick={rerender}>Rerender</button>
			<input key={Math.floor(Math.random() * 10)} />
		</div>
	);
}

createRoot(document.getElementById("root")).render(<App />);

Mention this as useful when combined with React's use Hook

It even caches results:

const getIsEvenOrOdd = cache(
  (number) =>
    new Promise((resolve) => {
      setTimeout(() => {
        resolve(number % 2 === 0 ? "Even" : "Odd");
      }, 2000);
    }),
);

function App() {
  const [counter, setCounter] = useState(0);

  const isEvenOrOdd = getIsEvenOrOdd(counter);

  return (
    <div>
      <button onClick={() => setCounter((v) => v + 1)}>Add to {counter}</button>
      <p>
        {counter} is {isEvenOrOdd}
      </p>
    </div>
  );
}

And errors:

const getIsEven = cache((number) => {
  alert("I am checking if " + number + " is even or not");
  if (number % 2 === 0) {
    throw "Number is even";
  }
});

// Even if you render this component multiple times, it will only perform the
// calculation needed to throw the error once.
function ThrowAnErrorIfEven({ number, instance }) {
  getIsEven(number);

  return <p>I am instance #{instance}</p>;
}