在 React JS 的回调中使用自定义钩子

Question

I have this custom hook:

const useSomething = () => {
    const displayAlert = (text) => {
        alert(text);
    };
    return {displayAlert};
};

Now I want to use it somewhere in my code like following:

const SampleComponent = () => {
    const {displayAlert} = useSomething();

    const navigateHandler = (event, page) => {
        // some api
        // ...
        displayAlert('Some alert');
    };

    const navigateHandlerCallback = useCallback(() => {
        navigateHandler(null, 1);
    }, []);

    useEffect(navigateHandlerCallback, []);

    return (
        <button onClick={e => { navigateHandler(e, 5); }}>
            Navigate to 5th page
        </button>
    )
};

Now the problem is eslint warning that says:

React Hook useCallback has a missing dependency: 'navigateHandler'. Either include it or remove the dependency array

And when I include navigateHandler as a dependency into useCallback dependency array, eslint says:

e 'navigateHandler' function makes the dependencies of useCallback Hook (at line XXX) change on every render. To fix this, wrap the 'navigateHandler' definition into its own useCallback() Hook

• I cant change navigateHandler function.
• I'm not sure if another callback can solve my problem with best performance or not.

👉 What should I do about this?

Answer 1

Update your custom hooks with useCallback :

const useSomething = () => {
    const displayAlert = useCallback((text) => {
        alert(text);
    };, [])
    return {displayAlert};
};

Then within your component:

const SampleComponent = () => {
    const {displayAlert} = useSomething();

    const navigateHandler = useCallback((event, page) => {
        // some api
        // ...
        displayAlert('Some alert');
    }, [displayAlert]);

    const navigateHandlerCallback = useCallback(() => {
        navigateHandler(null, 1);
    }, [navigateHandler]);

    useEffect(navigateHandlerCallback, []);

    return (
        <button onClick={e => { navigateHandler(e, 5); }}>
            Navigate to 5th page
        </button>
    )
};

By using useCallback this will surely improve performance during renders.