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.

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

⚙️ Installation

Latest stable release

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

yarn add react-hooks-use-previous

Latest Release Candidate

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

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;