Про ComponentDidMount/DidUpdate и отрисовку в браузере

Отвечая на Ваши вопросы:

Действительно ли, что вызов метода render и монтирование компонента в dom-дерево не гарантирует отрисовку его в браузере? Если так, то в какой момент браузер "решает" перерисовать dom-дерево?

В при вызове метода render React запускает процесс перерисовки, модифицируя документ и/или его конкретный(ые) элемент(ы). Далее браузер реагирует на эти изменения и превращает эти изменения в то что пользователь видит на экране.

Используя WEB API браузер сообщает слушателям о своем "состоянии", благодаря чему React может понять что событие render'a "произошло".

Однако это означает только то что само DOM дерево было обновлено, а процессы перерисовки запущены, но не то что пользователь гарантировано увидит полностью готовый для потребления контент.

Например, если мы попытаемся получить offset-размеры какого либо элемента привязавшись к ComponetDidMount или useEffect то можем получить 0, просто из за того что еще не все стили были применены.

Блокирует ли componentDidMount / DidUpdate отрисовку браузера (т.е останавливает ее) или он ее просто замедляет?

Нет, и нет.

Если componentDidMount/DidUpdate вызывает ДО отрисовки браузера, тогда почему в самом методе componentDidMount / DidUpdate мы можем получить (через ref или через querySelector) dom-узел и все его свойства, включая размеры, отступы и т.д.? При этом все свойства будут правильные и точные. Откуда он их берет, если сам dom-узел еще не отрисован.

(ответил выше)

Мы можем быть уверены что получим полностью готовый DOM если привяжемся к componentDidMount или useEffect. Это даст нам правильные привязки ref и корректную работу методов аналогичных querySelector.