When React functional component re-render, does it reassign assigned values & functions?

Question

If a code like this re-render by useEffect's dependency,

// ...
const Test = () => {
  // ...
  
  const value1 = "test1"
  
  const func1 = () => {
    // do something1
  }
  
  useEffect(() => {
    const value2 = "test2"
  
    const func2 = () => {
      // do something2
    }
  }, [sth])
  
  return (
    // ...
  )
}

does value1 & value2 & func1 & func2 reassign to memory?

I'm curious about it, related to optimizing.

Answer 1

Short answer, yes. Every time the function runs the old values will be garbage-collected, new primitive values will be assigned in memory and new references will be created to functions and objects.

But the real question with a "not-that-short" answer is "does it impact performance in a significant way?". And the answer is... depends. In most cases, it will not (see the doc about it). But there are scenarios where you will need to make some changes to have a performance optimization with useCallback and use useMemo.

It's also worth mentioning (as said in Shivam Jha's answer) that a trigger in useEffect no necessarily causes a re-render (DOM paint) because this process happens first on the virtual DOM and will only be persisted in the real DOM when necessary.

I will leave here some other references about this discussion.

Dan Abramov's tweet on memoizing everything (also look at responses)

Kent C. Dodds's article about render performance

Felix Gerschau's article about when render occurs