React Custom Hook: usePrevious

In this article series, we embark on a journey through the realm of custom React hooks, discovering their immense potential for elevating your development projects. Our focus today is on the "usePrevious" hook, one of the many carefully crafted hooks available in the collection of React custom hooks.

Github: https://github.com/sergeyleschev/react-custom-hooks

import { useRef } from "react"

export default function usePrevious(value) {
    const currentRef = useRef(value)
    const previousRef = useRef()
    if (currentRef.current !== value) {
        previousRef.current = currentRef.current
        currentRef.current = value
    }
    return previousRef.current
}

The advantages of using usePrevious are remarkable. By using useRef, this hook efficiently stores the current and previous values, updating them whenever the value changes. By comparing the current and previous values, you can easily detect and respond to changes in your component's data.

This custom hook can be a game-changer in various scenarios. For instance, you can utilize usePrevious to compare and visualize changes in data, track state transitions, or implement undo/redo functionality. Additionally, it can be valuable in form handling, animations, and any situation where having access to the previous value is crucial for your application's logic.

Let's take a glance at how usePrevious can be used in practice. Consider a React component called PreviousComponent, where we have a count state, a name state, and a button to increment the count and change the name. By incorporating usePrevious, we can effortlessly display the current count alongside its previous value, enabling users to visualize the count's changes at a glance.

import { useState } from "react"
import usePrevious from "./usePrevious"

export default function PreviousComponent() {
    const [count, setCount] = useState(0)
    const [name, setName] = useState("Sergey")
    const previousCount = usePrevious(count)
    return (
        <div>
            <div>
                {count} - {previousCount}
            </div>
            <div>{name}</div>
            <button onClick={() => setCount(currentCount => currentCount + 1)}>
                Increment
            </button>
            <button onClick={() => setName("John")}>Change Name</button>
        </div>
    )
}

Throughout this article series, we focused on one of the gems from the collection of React custom hooks – "usePrevious". This hook, sourced from the "react-custom-hooks" repository, revolutionizes how we work in our React applications.

#webdevelopment #webdev #javascript #typescript #frontend #react #reactjs #reactnative

Начать дискуссию

Я хотел сделать вкуснее всех, но оказалось, что это нерентабельно

Сначала мы открыли, а потом закрыли свой фастфуд, потом открыли доставку и сейчас её закрываем. Теперь я почти свободен и могу порассуждать о том, как владелец доставки может зарабатывать меньше курьера.

7777

1010

Ну как только люди начали выдавать справедливые замечания к цене и косякам, Обломов не выдержал и закрылся. Сам всех обсуждал, а собственной критики не выдержал.

разместить

Таня Боброва

Маркетплейсы

1ч

Wildberries запустил самовывоз товаров из торговых точек партнёров в 16 городах России

Покупатели смогут оформить заказ на маркетплейсе, а забрать непосредственно у продавца.

Авитолог Максим Алакшин

Маркетинг

4ч

«Удалить нельзя оставить: как справляться с негативными отзывами на Авито и даже зарабатывать на них»

Ася Карпова

2ч

Alibaba представила нейросеть, которая копирует движения людей на исходных видео и анимирует персонажей

Её можно протестировать в бесплатной демоверсии.

Южнокорейский разработчик чипов FuriosaAI отклонил предложение Meta* о покупке бизнеса за $800 млн — Bloomberg

И решил развивать его самостоятельно.

Заговор маркетплейсов: как Ozon и Wildberries избегают прямой конкуренции и покоряют Россию

Сложно представить жизнь современного человека без маркетплейсов. Ozon и Wildberries стали частью повседневности, но их противостояние — это не битва за одних и тех же клиентов. Это история о том, как два гиганта нашли уникальные пути к успеху, разделив аудиторию и создав собственные правила игры. Как предприниматель с многолетним опытом, я проведу…

1010