如何在按钮单击时触发 useCallback、useMemo 或 useEffect？

Question

I've heard that declaring a function in a react component to handle clicks should be done inside a useCallback hook to avoid recreating the function every render, specially if the function is somewhat complex, like this:

const handleClick = useCallback(()=>
{
  "...do a lot of calculations here that takes time"
},[]);    

<button onClick={handleClick}>
  Click me!
</button>

But I have a special case where I want the useCallback function to trigger when the button is clicked to set a state, this is what I want:

const [state, setState] = useState();

const handleClick = useCallback(()=>
{
  const newState = "...do a lot of calculations here that takes time"
  setState( newState )
},[ when button is clicked ]);

The problem is, how do i put the "when button is clicked" on the dependency of useCallback, and, as a matter of fact, any react hook that accepts a dependency list? I could do it with some dumb variable and separating the expensive calculations that take time from the onClick function, like bellow, but I don't think this is a good aproach since I'll be wasting memory:

const [state, setState] = useState();

const [dumb, setDumb] = useState(0);

useEffect(()=>
{
  const newState = "...do a lot of calculations here that takes time"
  setState( newState )
},[ dumb ]);

<button onClick=()=>setDumb(dumb+1)>
  Click me!
</button>

Answer 1

The problem is, how do i put the "when button is clicked" on the dependency of useCallback

You don't - the dependencies should be exactly (and only) the state/props that are referenced inside the function.

For example, if the function was

() => {
  setCountState(countState + 1);
  setToggledState(!toggledState);
}

then the dependencies array should be

[setCountState, countState, setToggledState, toggledState]

The ESLint rule exhaustive-deps helps you to automate this.

For your situation, it's perfectly fine to have the above as the only dependencies - you don't want a "dumb" placeholder value or any other dependency in the dependency array.

---

All that said:

declaring a function in a react component to handle clicks should be done inside a useCallback hook to avoid recreating the function every render, specially if the function is somewhat complex

This isn't really the case. useCallback isn't needed or useful in 99% of situations unless the function is being passed down to other components, in my experience - which doesn't appear to be the case here. (The function will be re-created every render regardless.)

useCallback shines when there are other components that use a function (especially components you don't know about), and you want to pass down as stable a reference as possible to them, to avoid unnecessary re-renders and hook calls.

Answer 2

useCallback doesn't prevent the creation of the function. It only prevents you from having a new function reference every time you re-render. So with useCallback , the function is re-created every render, buy useCallback gives you back an old reference from a previous function if none of the listed dependencies have updated.

const Comp = () => {
  const [state, setState] = useState([]);

  const clickHandler = useCallback((ev) => {
    setState(prevState => prevState.concat([/* something */])
  }, [setState]);

  return <button onClick={clickHandler}>Button</button>
}

Answer 3

I think you've got it a bit backwards. The useCallback hook is really only useful if the returned memoized function is passed down to descendant component via props. The benefit isn't that the function is heavy, but rather that the callback reference is stable and won't trigger an unnecessary rerender.

As for using a function as a button's onClick handler, it's the useCallback hook's return value that is passed to the button's onClick handler, not the other way around where you are trying to make the click event the dependency.

Example:

const clickHandler = useCallback(() => {
  // do some expensive computations
}, [...dependencies]);

...

<button type="button" onClick={clickHander}>Click Me</button>

If you aren't passing clickHandler as a prop to another React component there isn't much benefit to memoizing it.