2

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?

Pejman
  • 2,442
  • 4
  • 34
  • 62
  • Wrap the navigate handler in a useCallback like it says. Also, your custom hook is not a hook, since it is not using React hooks. It's just a function. – JMadelaine Nov 02 '20 at 09:35
  • @JMadelaine the custom hook is just a sample in here, but in my code is a custom hook that uses some react hooks. The thing is I need the navigateHandler not just for using inside the useEffect, As you can see, I use it in `onclick` of my button. – Pejman Nov 02 '20 at 09:39
  • 1. Create a wrapper for navigateHandler and define it inside useCallback to get rid of the warning. 2. For performance optimizations you need to measure the performance before useCallback and after it, and last but not least, you need to have a performance problem before you start optimizing for performance. – taubi19 Nov 02 '20 at 09:40

1 Answers1

5

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.

Aadil Mehraj
  • 2,586
  • 1
  • 7
  • 17