When to use useCallback, useMemo and useEffect?

Question

What is the main difference between useCallback,useMemo and useEffect. ?.Give examples of when to use useCallback,useMemo and useEffect.

Answer 1

useEffect() will let you create side effects on your components based on the dependencies you send to it.

function Example() {
  const [count, setCount] = React.useState(0);

  React.useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    

      
You clicked {count} times
       setCount(count + 1)}>
        Click me
      
    
  );
}

ReactDOM.render(, document.getElementById('root'))

The example above is taken from the documentation of React. You can see that each time you click the button it will trigger an update on the count field (using setCount()) and then, the effect that depends on the count variable will trigger an update on the title of the page.

---

useCallback() will return a memoized callback. Normally, if you have a child component that receives a function prop, at each re-render of the parent component, this function will be re-executed; by using useCallback() you ensure that this function is only re-executed when any value on it's dependency array changes.

function ExampleChild({ callbackFunction }) {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    setValue(value + 1)
  }, [callbackFunction]);

  return (
Child: {value}
);
}

function ExampleParent() {
  const [count, setCount] = React.useState(0);
  const [another, setAnother] = React.useState(0);
  
  const countCallback = React.useCallback(() => {
    return count;
  }, [count]);
  
  return (
    

      
       setCount(count + 1)}>
        Change callback
      
      
       setAnother(another + 1)}>
        Do not change callback
      
    
  )
}

ReactDOM.render(, document.getElementById('root'));

---

useMemo() will return a memoized value that is the result of the passed parameter. It means that useMemo() will make the calculation for some parameter once and it will then return the same result for the same parameter from a cache.

This is very useful when you need to process a huge amount of data.

function ExampleChild({ value }) {
   const [childValue, setChildValue] = React.useState(0);

   React.useEffect(() => {
     setChildValue(childValue + 1);
   }, [value])

   return 
Child value: {childValue}
;
}

function ExampleParent() {
  const [value, setValue] = React.useState(0);
  const heavyProcessing = () => {
    // Do some heavy processing with the parameter
    console.log(`Cached memo: ${value}`);
    return value;
  };

  const memoizedResult = React.useMemo(heavyProcessing, [value]);
  
  return (
    

      
       setValue(value + 1)}>
        Change memo
      
    
  )
}

ReactDOM.render(, document.getElementById('root'));