michaelhettmer / react-hooks-use-previous

Strongly typed and well tested React Hooks to store and retrieve previous values from any component property.

react-hooks-use-previous

Strongly typed and well tested React Hooks to store and retrieve previous values from any component property.

---

About

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

• ⚙️ Installation
• ⚡️ Getting Started
• 🎯 Features
• Other Solutions
• Issues
  • 🐛 Bugs
  • 💡 Feature Requests
• Contributors ✨
• LICENSE

⚙️ Installation

Latest stable release

npm install --save react-hooks-use-previous

or

yarn add react-hooks-use-previous

Latest Release Candidate

npm install --save react-hooks-use-previous@next

or

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 request and add it here!

Issues

Looking to contribute? Look for the Good First Issue label.

🐛 Bugs

Please file an issue for bugs, missing documentation, or unexpected behavior.

See Bugs

💡 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 Requests

Contributors ✨

Thanks goes to these people (emoji key):

Michael Hettmer 💻 📖 🚇 ⚠️

Chris Milson 💻 🐛 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

This project is licensed under the MIT License - see the LICENSE file for details.