Incosistent behavior

[hyoretsu]

Long story short we have an array of div's with an useEffect that uses a Ref, divided into 4 columns using <ResponsiveMasonry />, but the first one doesn't work properly.

  const [isClamped, setIsClamped] = useState(false)
  const commentRef = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    if (commentRef.current?.scrollHeight! > commentRef.current?.clientHeight!) {
      setIsClamped(true)
    }
  }, [])

  const [isClamped, setIsClamped] = useState(false)
  const commentRef = useRef<HTMLParagraphElement>(null)

  useEffect(() => {
    setIsClamped(commentRef.current?.scrollHeight! > commentRef.current?.clientHeight!)
  }, [])

Both strategies should work, right? The ref starts as null, which doesn't set isClamped to true, but then it renders, updates the ref and changes isClamped to true. (In the second

Except it doesn't, only the three latter columns get re-rendered for some reason. When checking the profiler, it shows that it re-rendered because of hook 3 (hasMounted):

and that Masonry's columnCount prop also changed.

What actually happens is this (logging the result of that condition):

Using a hand-made masonry component fixes this problem without any changes to the component with the useEffect, so it's something in this lib.

In fact I was wrong when I said that the ref started as null, because it's defined from the get-go (when using this hand-made component):