Link directly to StackBlitz
useLayoutEffect is almost the same as useEffect except that it's synchronous to render as opposed to scheduled like useEffect is. If you're migrating from a class component to a hooks-using function component, this can be helpful too because useLayoutEffect runs at the same time as componentDidMount and componentDidUpdate whereas useEffect is scheduled after. This should be a temporary fix.
The only time you should be using useLayoutEffect is to measure DOM nodes for things like animations. In the example, I measure the textarea after every time you click on it (the onClick is to force a re-render.) This means you're running render twice but it's also necessary to be able to capture the correct measurments.
If you make the useLayoutEffect into a useEffect it will have a janky re-render where it'll flash before it renders correctly. This is exactly why we need useLayoutEffect.
Note if you drag "off" the textarea and let go of the mouse it won't measure the textarea. This is because when you click and hold something and then drag off of it, it doesn't trigger a click event. That makes sense, right? When you click something by mistake, what do you do? You drag off of it and let go. Same princple here.
