How to add functions from props to useCallback dependency array?

Question

The Button receives the onClose method as a prop, which is used in the handleKeyDown. The handleKeyDown itself is added as a dependency for the useEffect, therefore I wrapped it with a useCallback so in case I want to add a state change in the future in the useEffect, this won't cause an infinite rerender. However, I have to add the onClose in the dependency of the useCallback wrapped around the handleKeyDown. As the onClose comes from props, this will change at every re-render, causing the handleKeyDown to be created at every re-render. Of course, a solution would be to wrap the onClose in a useCallback before passing it to the CloseButton and use React.memo on the component. However, I want to handle this from inside the component instead of outsourcing it. Could you please confirm if there is a way to solve this issue? Thank you.

    const Button: React.FC<ButtonProps> = ({ onClose ...props }) => {

    const onKeyDown = (event: KeyboardEvent) => {
        if (event.keyCode === 65) {
            onClose(event);
        }
    };

    useEffect(() => {
        window.addEventListener('keydown', onKeyDown);

        return () => {
            window.removeEventListener('keydown', onKeyDown);
        };
    }, [onKeyDown]); `

...
}

Martin Omacht · Accepted Answer · 2022-11-07 15:12:19Z

1

The official way to solve this is to use useCallback in the parent like you said (but there is no need to use React.memo though) and I would recommend doing it this way to avoid bugs.

If you have some good reason for not using this approach, you could do it by useRef like this:

const Button: React.FC<ButtonProps> = ({ onClose ...props }) => {
    const onCloseRef = useRef(onClose);
    onCloseRef.current = onClose;

    const onKeyDown = useCallback((event: KeyboardEvent) => {
        if (event.keyCode === 65) {
            onCloseRef.current(event);
        }
    }, [onCloseRef];

    useEffect(() => {
        window.addEventListener('keydown', onKeyDown);

        return () => {
            window.removeEventListener('keydown', onKeyDown);
        };
    }, [onKeyDown]);

    ...
}

But this approach has some pitfalls so I would avoid it if possible.

answered Nov 7, 2022 at 15:12

Martin Omacht

4353 silver badges15 bronze badges

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

2 Comments

Lori Over a year ago

Thank you. The problem is that the useCallback in the parent approach would force every usage of this component to be rewritten. Regarding the useRef method, could you please confirm why you need to set the .current property separately? Also, here won't it recreate the onKeyDown function on every re-render? Shouldn't we put the onCloseRef in useMemo? However this would maybe recreate the same issue...

Martin Omacht Over a year ago

You need to set the .current every render, because the onClose may change so we need to keep it up to date. And no, it won't recreate onKeyDown every render because the reference of onCloseRef is stable, this is guaranteed by useRef.

ncpa0cpl · Accepted Answer · 2022-11-07 14:47:01Z

1

There's no way to determine if the onClose function has changed since previous render if it is not being memoized by the parent that defines it.

You can either assume that this function shouldn't change between renders and just not add it to the dependency array or you will have to tun that useEffect on every render (omit the dependency array altogether).

answered Nov 7, 2022 at 14:47

ncpa0cpl

1921 silver badge14 bronze badges

Collectives™ on Stack Overflow

How to add functions from props to useCallback dependency array?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related