Shouldn't this state initially be set to props.threadInfoInput? Doesn't it save one extra re-render of the memo below, when the initial props.threadInfoInput is non-null?

I'm not an expert, but two things

• It is a good practice that the setTimeout handle should be cleared with clearTimeout in the effect cleanup function. Otherwise, you might encounter a glitch (prop=null -> setTimeout -> prop=nonNull -> setState(nonNull) -> 200ms passed -> setState(null).
• I'm not sure if any of these examples apply here but I suspect that this effect might be unnecessary: https://beta.reactjs.org/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes - regardless of that, I consider this article worth reading anyway ;)

I don't think so, since the Effect hook is always called at the first render if I'm not mistaken.
But this one re-render can be avoided by both setting here sate to props.threadInfoInput and adding a condition in the effect hook, something like:

if (props.threadInfoInput && props.threadInfoInput !== threadInfo) {
      setThreadInfo(props.threadInfoInput);
} else if( !props.threadInfoInput ){
...

I guess it won't hurt.

We could do this without using the Effect hook, but then we are not protected against the glitch you mentioned. So the effect is needed, but I didn't write the one thing it actually is needed for 🤦‍♀️
Thank you for the article, it's very insightful, I really liked it!

Actually the same applies to when !!threadInfoInput === false so it has to be

if(props.threadInfoInput !== threadInfo) {
  if ( props.threadInfoInput ) {
      setThreadInfo(props.threadInfoInput);
  } else if ( !props.threadInfoInput ){
    ...
  }
}

This 'if' definitely won't hurt.

the Effect hook is always called at the first render if I'm not mistaken.

It is called indeed, but the re-render occurs only if state changes as a consequence of executing the Effect.

Current scenario:

1. initialProps = nonNull
2. initialState = null
3. component is initially rendered
4. effect is Called: setState(null -> nonNull) - state changed
5. change of state triggers re-render

My suggestion:

1. initialProps = nonNull
2. initialState = initialProps = nonNull
3. component is initially rendered
4. effect is Called: setState(nonNull -> nonNull) - setState called, but state itself did not change
5. no need to re-render

And adding that if is a good idea!

Found an article describing what I mean: https://pgarciacamou.medium.com/react-doesnt-always-trigger-a-re-render-on-setstate-4644212560a

Also created a JSFiddle that proves my point: https://jsfiddle.net/xLzrv9td/

We could do this without using the Effect hook, but then we are not protected against the glitch you mentioned.

Yes, you're right. Clearing timeout would be very tricky in this case. So let's just add clearTimeout and we're done.

Ahh, right. Thank you for all of that