Passing Thoughts Concerns

I have a couple things that I’m curious about from this project:
Passing Thoughts project

Why did we need to pass in thought to the dependency array in the useEffect hook in Thought.JS? The state variable is thoughts , thought is not in state, it just represents each object from the array in state doesn’t it?

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

Also, my code in App.JS for the remove feature seems to not be working right. I think this is causing it but I can’t understand why.

  const removeThought = id => {
    const filtered = thoughts.filter(thought => thought.id !== id)
    setThoughts(filtered);
  }

It seems to be starting the timeout for a thought right after the last is done. So on the first render when there are two thoughts on the page by default, it removes the first after 15 seconds, and removes the second one 15 seconds right after the first.

I don’t fully understand why, but you should use functional state in this example to ensure the right behavior occurs. Here is a response that talks a little bit about why you would do so: When to use functional state

As for why we include thought as a dependency, I am not entirely sure. I think 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. I would love to hear a better explanation than this, but I think I am close.