The old "useEffect has a missing dependency" when calling an outside function - reactjs

Question

Yes, I know this question have been asked zillion times, but none of the answers are fit to my code.
My useEffect() calls an outside function (showIncrement()) that logs my increment state value. The problem is showIncrement() is also used by a button, so I can't move it inside the useEffect() scope.
I know a few solutions to this:
re-create the function inside useEffect(), but then I have two identical functions
use the React useCallback() function, React documentation call it the last resort, and other answer in another question also don't recommend using it, so I'm not really sure
The question is, what is the best way to solve this problem? Is it safe to use useCallback()?
Here's my code:
const App = () => {
const [increment, setIncrement] = React.useState(2);
const showIncrement = React.useCallback(() => console.log(increment), [
increment,
]);
React.useEffect(() => {
showIncrement();
}, [showIncrement]);
return (
<div className="App">
<button type="button" onClick={showIncrement}>
Show Increment
</button>
</div>
);
};

Answer 1

If showIncrement doesn't need access to update the state variables, the easiest way to fix this is to move it outside the component, so it won't be recreated on every render and have a stable reference:
const showIncrement = (increment) => console.log(increment);
const App = () => {
const [increment, setIncrement] = React.useState(2);
React.useEffect(() => {
showIncrement(increment);
}, [increment]);
return (
<div className="App">
<button type="button" onClick={() => showIncrement(increment)}>
Show Increment
</button>
</div>
);
};
Another way is to use the useCallback hook:
const App = () => {
const [increment, setIncrement] = React.useState(2);
const showIncrement = React.useCallback(() => console.log(increment), [
increment
]);
React.useEffect(() => {
showIncrement();
}, [showIncrement]);
return (
<div className="App">
<button type="button" onClick={showIncrement}>
Show Increment
</button>
</div>
);
};

Answer 2

As I understand this situation, you want to:
Re-use showIncrement logic.
Run showIncrement on component's mount.
Not violate linter warnings.
The problem here is that showIncrement depends on state value increment, so either way, your useEffect has to include increment in dep array.
Usually, you go for useCallback when its dep array ([increment] in this case) not frequently changes.
So depending on your use case, since showIncrement triggered only onClick it seems like a good choice.
const App = () => {
const [increment] = React.useState(2);
const isMounted = useRef(false);
const showIncrement = useCallback(() => {
console.log(increment);
}, [increment]);
React.useEffect(() => {
if (!isMounted.current) {
showIncrement();
}
}, [showIncrement]);
return (
<div className="App">
<button type="button" onClick={showIncrement}>
Show Increment
</button>
</div>
);
};