Объясните жизненный цикл React ref: почему внутри useEffect на первом рендере уже доступна DOM-нода через ref.current?

DOM-ref присваивается на commit-фазе после создания соответствующего DOM-узла, а effect выполняется уже после этого commit.

Поэтому при обычном монтировании видимого элемента useEffect видит ref.current. Во время render узел ещё может отсутствовать, а при условном рендере ref может оставаться null. При удалении элемента React очищает ref. Не считайте доступность DOM гарантированной для любого первого effect: важен фактически смонтированный элемент.