设置 state 时使用 React Hook 时的警告 useCallback

Question

I have a website with a super simple navigation.

It just displays different components based on the boolean value of a state property.

It's working fine, but I have this nagging warning that shows on the functions that handle clicks.

The warning is here:

useCallback does nothing when called with only one argument.

But I'm not sure why it's telling me that because my navigation is working.

Do I need to add something else to make it work better?

Thanks!

Here is my little component for navigation.

// creat state
const [showCreationPage, setCreationPage] = useState(true);
const [showDisplayPage, setDisplayPage] = useState(false);

// here is warning sign: useCallback does nothing when called with only one argument.
const handleCreationPage = useCallback(e => {setDisplayPage(false) || setCreationPage(true) });
const handleDisplayPage = useCallback(e => { setCreationPage(false) || setDisplayPage(true) });


// navigation buttons
<a href="#" onClick={handleCreationPage}>Create Beer</a>
<a href="#" onClick={handleDisplayPage}>Display Beer</a>

<div id="main">
    <div>
        {showCreationPage && <Create />}
    </div>

    <div>
        {showDisplayPage && <Display />}
    </div>
</div>

Answer 1

useCallback expects an array of dependencies as a second argument. That tells the memoization to update whenever the value of one of the dependencies is updated. If you never want the callback function to update, just pass an empty array.

Reference: https://reactjs.org/docs/hooks-reference.html#usecallback