Телеграмм чат группы javascript

Не уверен про обновление состояния именно в useLayoutEffect, речь может быть о чем угодно, что вызовет новый ререндер

14:35пожаловаться #1

МУ

Ясно. Но тогда вопрос:


React update 1: render virtual DOM, schedule effects, update DOM
Call useLayoutEffect
Update state, schedule re-render
Call useEffect
React update 2
Call useLayoutEffect from update 2
React releases control, browser paints the new DOM
Call useEffect from update 2

Тут ясно, что на 4м шаге сработал useEffect (всё теперь логично, как опсудили выше, ведь в useLayoutEffect обновилось состояние, и вызвался новый ререндер). Потом тоже ок, произошёл ререндер. Но почему тогда снова вызывается useLayoutEffect? Ведь до этого и useLayoutEffect и useEffect уже отработали?

14:41пожаловаться #2

Потому, что там есть reactUpdate1, reactupdate2
Все эффекты вызываются каждый ререндер, если обновились зависимости

14:42пожаловаться #3

МУ

аа, то есть в данном примере имеется ввиду, что обновились зависимости, которые находятся, к примеру, в массиве зависимостей useEffect, поэтому он снова сработал. да?

14:43пожаловаться #4

Речь идет же не о конкретном коде
А о фазах и порядке, в котором выполняются разные хуки в разных ситуациях

14:44пожаловаться #5

МУ

да, но ведь в useLayoutEffect обновляется состояние, а значит при повторной фазе запуска этого самого useLayoutEffect снова будет обновление состояния, и снова ререндер? Бесконечный

14:45пожаловаться #6

У вас есть конкретный код, о котором вы говорите?

14:46пожаловаться #7

МУ

infallible-wildflower-127lv - CodeSandbox

увы( я же просто привожу примеры из статьи( Но там приводится некий код, но я не знаю, подходит ли он для нашего случая https://codesandbox.io/s/infallible-wildflower-127lv?file=/src/App.js?

CodeSandbox

infallible-wildflower-127lv by thoughtspile using react, react-dom, react-scripts

14:47пожаловаться #8

Еще раз: статья объясняет тонкости работы хуков без привязки к каким-то конкретным стуациям

14:47пожаловаться #9

МУ

ага, ясно, но просто логично же, что если снова вызовется useLayoutEffect, в который вызывает ререндер (он же и вызвал его в первом цикле), то по идее будет бесконечные рендеры?

14:48пожаловаться #10

МУ

Поэтому мне и кажется странным логиака выполнения

14:48пожаловаться #11

Кто сказал, что ререндер был вызван useLayoutEffect?)
Я статью не читал, может там это сказано, конечно
Кто сказал, что в эффекте не стоит условие, которое запускает ререндер только в определенных случаях?)

14:48пожаловаться #12

МУ

Понял, думаю… ))

14:49пожаловаться #13

Речь вообще сейчас не идет о лоогике, которая лежит внутри эффектов

14:49пожаловаться #14

Речь только о том, когда и что реакт будет вызывать

14:49пожаловаться #15

МУ

Аа, я вот почему так подумал:

```

React update 1: render virtual DOM, schedule effects, update DOM
Call useLayoutEffect
Update state, schedule re-render
Call useEffect
React update 2
Call useLayoutEffect from update 2
React releases control, browser paints the new DOM
Call useEffect from update 2

```

Поскольку тут после первого Call useLayoutEffect произошло обновление состояния и ререндер, то я и подумал, что, значит, Call useLayoutEffect в данном случае что-то внутри делает, что делает ререндер)

14:50пожаловаться #16

МУ

Ну да, то есть тут просто показывается последовательность)

14:51пожаловаться #17

Но почему в этот момент не мог обновиться родитель, к примеру? Короче, это не так важно, кто вызвал ререндер

14:52пожаловаться #18

МУ

ага, точно, думаю… )

14:53пожаловаться #19

МУ

Тут важно понимать, что useEffect гарантировано будут соблюдать порядок своих вызовов, которые происходят чётко перед каждым ререндером, к примру, Но либо после отрисовки, если всё идёт «как обычно»