I have a custom react hook:

    function useItem(id) {



        const [value, setValue] = useState();



        useEffect(() => {

            databaseRead(id).then(i => setValue(i));

        }, [id]);



        function setItem(i) {

            setValue(i);

        }



        function writeItem(i) {

            databaseWrite(id, i);

        }



    return [value, setItem, writeItem];

}

When using a hook like this in a component, the returned writeItem function changes every time the value changes (presumably because I create a new array every time).

How can I avoid re-renders of the Button component when I use my hook in an Item like so?

function Item(props) {

    const [item, setItem, writeItem] = useItem(props.id);

    return(

        <>

            <ItemEditor data={item} setItem={setItem}/>

            <Button onPress={writeItem}/>

        </>

    )

}

My current working but awkward approach is to return a useRef object instead of the array from my hook:

function useItem(id) {

    const retVal = useRef({

       value: value, 

       setItem: setItem, 

       writeItem: writeItem

    }).current;



    const [dirty, setDirty] = useState();

    function makeDirty() { setDirty(Math.random()); }



    //and instead of setValue(i) do retVal.value=i; makeDirty();

    return retVal;

}

Many thanks!