Returning array of functions from custom react hook?

Question

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!

Shubham Khatri · Accepted Answer · 2020-05-05 15:58:47Z

21

You can make use of useCallback hook to memoize the functions so that they aren't created again on each render

function useItem(id) {

        const [value, setValue] = useState();

        useEffect(() => {
            databaseRead(id).then(i => setValue(i));
        }, [id]);

        const setItem = useCallback(function(i) {
            setValue(i);
        }, []);

        const writeItem = useCallback(function(i) {
            databaseWrite(id, i);
        }, [id]) // this depends on id, and need to be recreated on id change

    return [value, setItem, writeItem];
}

answered May 5, 2020 at 15:58

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Steve Moretz Over a year ago

I read somewhere useCallback doesn't always help you if you do some heavy calculations and stuff use it otherwise it even makes everything worse.

damdeez Over a year ago

You should use useCallback only if you start noticing performance hits or are absolutely sure its working for you as intended. Premature optimization can come back to haunt you

Collectives™ on Stack Overflow

Returning array of functions from custom react hook?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related