Strongly typed and well tested React Hooks to store and retrieve previous values from any component property.
React Hooks Use Previous is a collection of strongly typed and well tested hooks to store and retrieve retrieve previous values from any component property. The most common default values are already set so just close that bracket and save yourself those extra characters.
This library works out of the box with React / React Native projects using JavaScript or Typescript and has all necessary type declarations included.
npm install --save react-hooks-use-previousor
yarn add react-hooks-use-previousnpm install --save react-hooks-use-previous@nextor
yarn add react-hooks-use-previous@nextimport React, { useState } from 'react';
import usePrevious, { usePreviousNumber } from 'react-hooks-use-previous';
import { isEqual } from 'lodash';
const MyReactComponent = () => {
// This is the state variable from which we need
// the previous value while rendering
const [value, setValue] = useState<number>(0);
// Option 1: Use the generic hook so that we can
// assign a custom initial previous value (=13)
// for the first component render execution
const prevValue = usePrevious<number>(value, 13);
// Option 2: Use one of the predefined hooks which
// already ship with a default value (e.g. =0) and
// profit from a much cleaner and more readable syntax
const prevValue = usePreviousNumber(value);
// Optional: Pass a custom equality function in a configuration
// object as the third parameter. The default equality check is
// a reference comparison. This additional parameter allows e.g.
// a deep value comparison to check if an update is necessary.
const prevValue = usePrevious<number[]>(value, [], { equalityFn: (a, b) => isEqual(a, b) });
return (
<div>
<span>{`The previous value was: ${prevValue}`}</span>
<span>{`The current value is: ${value}`}</span>
</div>
);
};
export default MyReactComponent;- Stores and provides value of a state before it was updated
- Includes helper functions to simplify usage
I'm not aware of any, if you are please make a pull request and add it here!
Looking to contribute? Look for the Good First Issue label.
Please file an issue for bugs, missing documentation, or unexpected behavior.
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.
Thanks goes to these people (emoji key):
 Michael Hettmer 💻 📖 🚇 |
 Chris Milson 💻 🐛 |
This project follows the all-contributors specification. Contributions of any kind welcome!
This project is licensed under the MIT License - see the LICENSE file for details.