useMemo

useMemo is similar to useCallback except useMemo is used to return some value rather than function. useMemo is used to do some expensive calculations which need to be memorized so that we can increase performance by not doing that calculation on every re-render.

You can memorize your functions too but you will have to return a function which will lead to your code becoming less readable and that is why React offers useCallback to memoize functions.

  • Usage of useMemo:
const handleSubmit = useMemo(() =>{
  return a + b; // some expensive calculation that need to be skipped
},[a , b]);// dependency array, if these change result is calculated again