react-hooks-use-previous
Strongly typed and well tested React Hooks to store and retrieve previous values from any component property.
!Build Statusbuild-badgebuild !Code Coveragecoverage-badgecoverage !Versionversion-badgepackage !Downloadsdownloads-badgenpmtrends !MIT Licenselicense-badgelicense !Semantic Releaserelease-badgerelease !Conventional Commitscommits-badgecommits
!PRs Welcomeprs-badgeprs
!Code of Conductcoc-badgecoc
!Discorddiscord-badgediscord
!Twittertwitter-badgetwitterAbout
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.
Table of Contents
- 🐛 Bugs - 💡 Feature Requests
⚙️ Installation
Latest stable release
npm install --save react-hooks-use-previousor
yarn add react-hooks-use-previousLatest Release Candidate
npm install --save react-hooks-use-previous@nextor
yarn add react-hooks-use-previous@next⚡️ Getting Started
import 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;🎯 Features
- Stores and provides value of a state before it was updated
- Includes helper functions to simplify usage
Other Solutions
I'm not aware of any, if you are please make a pull requestprs and add it here!Issues
Looking to contribute? Look for the Good First Issuegood-first-issue label.🐛 Bugs
Please file an issue for bugs, missing documentation, or unexpected behavior.See Bugsbugs
💡 Feature Requests
Please file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize what to work on.See Feature Requestsrequests
Contributors ✨
Thanks goes to these people (emoji keyemojis):This project follows the all-contributorsall-contributors specification. Contributions of any kind welcome!
