58Implement usePrevious() without causing an additional render

Implement usePrevious(value). It returns the value from the previous render (undefined on the first render), without causing any extra render.

function Price({ amount }) {
  const previous = usePrevious(amount);
  const direction = previous === undefined ? "" : amount > previous ? "▲" : amount < previous ? "▼" : "";
  return <span>{amount} {direction}</span>;
}

Also implement usePreviousDistinct(value), which returns the last value that was different from the current one, so re-renders with the same value do not lose it.

Requirements

• usePrevious returns undefined on the first render and the previous render's value afterwards.
• Neither hook may trigger a re-render: no setState in an effect.
• Only committed renders count: do not write refs during render in usePrevious.