Save the previous value of a variable

#Keeping track of previous values with a custom hook

import * as React from 'react';

const usePrevious = (value) => {
    const ref = React.useRef();
    React.useEffect(() => {
        ref.current = value;
    });
    return ref.current;
};

#Discovering scroll direction

const [scrollPosition, setScrollPosition] = React.useState(0);

const handleScroll = () => setScrollPosition(window.scrollY);

React.useEffect(() => {
    document.addEventListener("scroll", handleScroll);
    return () => {
        document.removeEventListener("scroll", handleScroll);
    };
}, []);

Good practice

To improve the performance of your scroll handler, it's recommended to use either debounce or throttle. This is because the `scroll` event can fire multiple times per second, which can slow down your website or app if your handler function is doing a lot of work.

Debouncing and throttling are techniques that limit the number of times a function is called based on a certain time interval. Debouncing waits until a certain amount of time has passed since the last time the function was called before calling it again. Throttling, on the other hand, only calls the function once every set interval. These techniques can help ensure that your scroll handler is efficient and doesn't negatively impact the user experience.

In our example, we'll use the `throttle` function from the lodash library to control the frequency of our `handleScroll` function.

ts

import { throttle } from 'lodash';

const handleScrollThrottled = throttle(handleScroll, 100);

React.useEffect(() => {
    document.addEventListener("scroll", handleScrollThrottled);
    return () => {
        document.removeEventListener("scroll", handleScrollThrottled);
    };
}, []);

In this example, we import the `throttle` function from lodash to optimize our scroll event handling. We create a new function, `handleScrollThrottled`, by passing in our original `handleScroll` function and an interval of 100 milliseconds. Then, we add an event listener for the `scroll` event using our new throttled function. Finally, we remove the listener when our component unmounts.

By using throttling or debouncing in your scroll handlers, you can significantly improve your component's performance, reducing unnecessary re-renders and making your user experience smoother.

const previousScrollPosition = usePrevious(scrollPosition);

React.useEffect(() => {
    if (previousScrollPosition < scrollPosition) {
        console.log("Scroll down");
    } else if (previousScrollPosition > scrollPosition) {
        console.log("Scroll up");
    }
}, [scrollPosition, previousScrollPosition]);