Accepts a variable (possibly a prop or a state) and returns its history (changes through updates).
- You want to keep track of the history of a value
import { useState } from 'react';
import { useInterval, useValueHistory } from 'beautiful-react-hooks';
const TestComponent = () => {
const [count, setCount] = useState(0);
const countHistory = useValueHistory(count);
useInterval(() => setCount(1 + count), 500);
return (
<DisplayDemo>
<p>Count: {count}</p>
<p>The history of the `count` state is:</p>
<blockquote>
{ countHistory.join(', ') }
</blockquote>
</DisplayDemo>
);
};
<TestComponent />