Exercise 4 enhancement about advanced-react-hooks

[kentcdodds]

In any case, I don't think I'm going to take time explaining this other than to say "don't do this" 😅

Thanks!

[kentcdodds]

I think the reason that you're hitting dead ends on finding information here is because nobody expected that people would do that sort of thing. I'm not sure why you would.

What I suggest is you publish your findings in a blog post :) I could even reference it in the workshop material if you don't mind!

[kentcdodds]

Not only necessary but also one where this the natural way to solve the problem

[kentcdodds]

That's still contrived. I'm not sure why you'd ever need to display that value to a user 🤷‍♂️

[bruce-c-liu]

"nobody expected that people would do that sort of thing"
Why not? It's not explicitly nor implicitly stated anywhere in React docs not to do this. 😢

A legitimate use case for updating state in useLayoutEffect is when both are true:

1. The state update depends on the updated DOM for that render.
2. It must be before paint.

My understanding is that if you have those requirements, the state update must be done in useLayoutEffect. But as I mentioned before, it comes with an undocumented and unintuitive behavior that may:

1. cause unexpected effects for devs (as seen by that github issue)
2. tank performance

TLDR; I'm not sure saying "just don't do this" is the way to go, since it seems like there are legitimate use cases. And seeing how this course is geared toward intermediate/advanced React developers, this kind of nitty gritty detail is exactly what I love. 😄

You may be right that this may be more suitable for a blog post though. I don't have time to create one at the moment, but feel free to make use of this discussion if you're ever inclined. ❤️

Anyway, really enjoying the content, Kent! Look forward to learning more.

[kentcdodds]

Sorry, I don't understand the use case. Could you describe an actual use case where this would be necessary?

[bruce-c-liu]

Sure, I made an example that demonstrates the use case I mentioned. Please toggle between useEffect vs useLayoutEffect and see the UI lag difference after clicking "remove message".

Note that useLayoutEffect is required here due to <SlooooowSibling />. Per your blogpost, one should use useEffect if "your DOM changes are unobservable". Unfortunately, DOM changes are indeed observable here. I believe this satisfies the "necessary" part. As to "natural"... Given a <SlooooowSibling />, I'm not sure if there's a more "natural" way to solve this use case. 😅

If there wasn't a <SlooooowSibling />, then you should definitely use useEffect, because as I previously mentioned, setting state in useLayoutEffect is very nonperformant. Having to use useLayoutEffect in my use case above actually comes with heavy costs. Please let me know if there's a better solution. 👍

[bruce-c-liu]

Fair enough. 😥