1

useEffect will execute the function when there was re-render occurs and when the state value is changed. The useMemo also work similar like useEffect where it Will execute the function when there was re-render occurs and when the state value was change.

But what is the different between this two hook(useMemo and useEffect)

1
  • Well it's be good to check the docs (react.dev/reference/react/hooks) for each to see what they are and the difference will become obvious. Basically for each render, useEffect is for executing code and useMemo is for caching a value. Check examples of each and Google some basic articles covering core React hooks
    – Jayce444
    Commented Nov 4, 2023 at 6:31

2 Answers 2

0

useEffect and useMemo are re-render depending on its dependency change.

But useEffect is for handling side effects and does not returning any value

 useEffect(()=>{
    const timer = setInterval(() => {
      setIsMounted(true);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
 },[])

And useMemo is for caching a calculation between re-render

//caching the value returned from function getValueByState 
const value = useMemo(
    () => getValueByState(state),
    [state]
  );
3
  • Thanks for the explanation sir, but i want to ask another question, does useMemo, useEffect and useCallback will be execute and return when the component rendered for the first time ? Commented Nov 4, 2023 at 7:29
  • Yes, they all execute when the component first rendered
    – Aminarune
    Commented Nov 4, 2023 at 7:46
  • Yes, and whenever the dependencies change.
    – Egge
    Commented Nov 4, 2023 at 7:46
0

One of the key difference is order of execution of useEffect and useMemo. useEffect is run after the component is rendered. useMemo is run before the component is rendered. Why is this important?

See below usecase where we are adding Salutation to a username

  1. using useEffect -

const getSaluation = (name) => `Hi, ${name}`;
const App = () => {
  const [name, setName] = useState('');
  const [fullName, setFullName] = useState('');
  const renderCount = useRef(0);
  renderCount.current = renderCount.current+1;

  useEffect(() => {
    setFullName(() => getSaluation(name))
  }, [name])

  return(<>
    <input type="text" value={name} onChange={((e) => setName(e.target.value))}></input>
     Name - {fullName} 
     {console.log('render order ', renderCount.current) /* here component is twice everytime the name variable is changed by the user */}
     </>
  )
}
// plus un above code we need to unnecessary create fullName state variable
// component is renderd twice everytime
// reason - name variable changed, component re-renders, after rerender, useEffect is called, there we are setting fullName, again render method is called
// so every time 2X re-renders
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

  1. using useMemo

const getSaluation = (name) => `Hi, ${name}`
const App = () => {
  const [name, setName] = useState('');
  const renderCount = useRef(0);
  renderCount.current = renderCount.current+1;
  const fullName = useMemo(() => getSaluation(name),[name]);
  return (
    return (
    <> <input type="text" value={name} onChange={((e) => setName(e.target.value))}></input>
      Name - {fullName}
    <Button onClick={() => setCount(count + 1)}>
      {console.log('render order ', renderCount.current)}
      <span role="img" aria-label="react-emoji">⚛️</span> 
    </Button>
    </>
  )
  )
}
// we eliminated useEffect + now we don;t need fullName state variable as well/
// because when name state variable is changed, component re-renders, 
// and everytime fullName variable is calculated from useMemo
// and since useMemo is run before the render method is called
// we have latest value of fullName and component renders only
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.