React's useEffect Hook Gets Called Twice

I find myself to be confused while using React’s useEffect hook often. During recent work, I need to use useEffect hook to observe a state or (some state) changes and perform certain code. However, it always results unexpectedly due to extra invocations of that certain useEffect hook, which then calls the side-effect calls ot APIs multiple times and causes incorrect state. I am fighting against the useEffect hook until the Deepseek suggests me setup the deps to a callback function of useCallback hook. However, I am still confused so I try to summarize the workable practices on useEffect hook in this blog.

The Deepseek tells me that useEffect hook can be invoked twice intentionally in dev mode in strict mode. That can explain why I see excessive calls on useEffect hook. Because React components will mount twice in dev mode in order to help developers to find out potential issues (Jesus…).

On the other hand, the suggestion advises me to set deps array to a useCallback so that unnecessary useEffect calls.

So probably I do in this way

const aCallback = useCallback(() => {
    ......
}, []); // Skip the deps of useCallback so that the callback is just cached one time

useEffect(() => {
    ......
}, [aCallback]);

By doing so, if the useEffect hook is invoked twice in dev mode, which implies okay because this behavior is expected in React. This helps to rule out the issue by starting deps simple.

Honestly, the way of React to observe reactive state is clumsy and error-prone. I don’t like React.