Question to dependency array in useEffect in step 12 in Passing Thoughts project (inside Hooks/Learn React)

Get Help React.js
1

I have a question to step 12 in the Passing Thoughts project:
https://www.codecademy.com/courses/react-101/projects/react-hooks-passing-thoughts

Why do we need to include thought as a dependency?

The only way you can change the thought object is by deleting it. Is that it ? I.e. deleting the thought object also means that the state of the object is changed?

In another thread (Passing Thoughts Concerns) [1moregame] explain that “it is because the thought object carries the timer, and thus when the thought is removed, it changes and triggers the useEffect to fire and pre-render the page”.

Can anyone add more detail to this ?

Here is the useEffect code block:

  useEffect(() => {
    const timeRemaining = thought.expiresAt - Date.now();
    const timer = setTimeout(() =>{
      removeThought(thought.id);
      }, timeRemaining)
    return () => clearTimeout(timer)
  }, [thought])
2

From the React docs:

make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect . Otherwise, your code will reference stale values from previous renders.

If you don’t do that, you’ll get a warning by ES Lint and it would be bad practice. But it can be a real pain as this often causes infinite rerenders, although you may want the effect just to be executed once – on component mount – or just a few times when a certain state updates.

This issue can be avoided by either defining functions inside the effect hook or by using useMemo or useCallback hooks. Luckily, the thought state does not update within the component, so you don’t need to worry about unnecessary rerenders.

3

Including it tells React to re-run the code inside useEffect whenever the objects it is dependent on change. So, in that code, you’re saying that you want that useEffect block to run whenever thought changes. If you don’t include any dependency, useEffect will re-run whenever anything changes; if you include an empty dependency array, useEffect will run only once when the page is rendered; and finally, the above case occurs when dependencies are provided.

What mirja said above is also true, but that’s why you’re asked to do it. As you continue your learning of React, you’ll learn better patterns for developing functions that run when states are updated in more efficient ways. This is especially true as your apps get more complicated.