反应：运行处理程序，仅在选择渲染，useCallback或useEffect吗？

Question

I would like to run a function only when the variable phone (see below) changes.

Note: useMediaQuery works as intended, it initiates re-render whenever the screen size changes above / below 768, and returns true / false.

const phone = !useMediaQuery('(min-width:768px)'); // 768 and down: Smartphones

console.log('phone', phone);
useCallback(() => {
  console.log('useCallback fired');
  if (!phone) handleDrawerClose();
}, [phone])();

My above code fires the callback in useCallback on every re-render. Regardless if phone changed. I tried useEffect and it partially works.

Why does not useCallback work as intended?

What is the best approach here?

Answer 1

useCallback returns a memoized function, which you then call. As you call it, it gets executed.

What is the best approach here?

useEffect