use-last
A React hook to conditionally return the last value that has met a certain criteria.
This is useful when you have a React component that has a state or prop that changes over time, but you want to conditionally skip some values.
Example
Implementation:
import useLast from 'use-last';
function LastValue({value}) {
const lastDefinedValue = useLast(value);
return <p>{lastDefinedValue}</p>;
}Usage:
// Renders "2"
<LastValue value={2} />
// Still renders "2"
<LastValue value={undefined} />
// Renders "4"
<LastValue value={4} />Configuration
By default, value is checked for being !== undefined. You can provide a second argument to customize this condition:
import useLast from 'use-last';
function LastEvenValue({value}) {
const lastEvenValue = useLast(value, value % 2 === 0);
return <p>{lastEvenValue}</p>;
}