Custom hook to enable callback function for hooks

App.js

import { useStateWithCallback } from "./useStateWithCallback";

const App = () => {
    const [bananas, setBananas] = useStateWithCallback(0);

    const eatMore = () => {
        setBananas(bananas + 1, (prevValue, newValue) => {
            console.log(newValue);
        });
    };

    const shitSome = () => {
        setBananas(bananas - 1, (prevValue, newValue) => {
            console.log(newValue);
        });
    };

    return (
        <div
            style={{
                paddingLeft: "15px",
            }}
        >
            <p>I have eaten {bananas} bananas</p>
            <button onClick={eatMore}>Eat more</button>
            <button onClick={shitSome}>Shit some</button>
        </div>
    );
};

export default App;

usageExample.js

...

const [bananas, setBananas] = useStateWithCallback(0);

const eatMore = () => {
    setBananas(bananas + 1, (prevValue, newValue) => {
        console.log(newValue);
    });
};

const shitSome = () => {
    setBananas(bananas - 1, (prevValue, newValue) => {
        console.log(newValue);
    });
};

...

useStateWithCallback.js

import { useState } from "react";

const useStateWithCallback = (initialValue) => {
    const [value, setValue] = useState(initialValue);

    const setValueAndCallback = (newValue, callback) => {
        setValue(prevValue => {
            if (callback) {
                callback(prevValue, newValue);
            }
            return newValue;
        });
    };

    return [value, setValueAndCallback];
}

export { useStateWithCallback};