Как это работает с кастомным хуком?

Question

[gsaw]

Помогите пожалуйста понять как это работает?

https://ru.reactjs.org/docs/hooks-custom.html

По ссылке ваыше объясняется, как писать собственные хуки и в качестве примера приводится следующий хук.

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

А так он используется

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);

Мне совершенно не понятно, как новое значение попадет в компоненту FriendStatus.

Как я все это понимаю,
1. для прорисовки компоненты вызвается FriendStatus функция.
2. Которая в свою очередь вызывает функцию useFriendStatus
3. в функции useFriendStatus в свою очередь вызвается useState
4. Посредством useEffect создается функция, которая потом вызовет setIsOnline
5. Возвращается значение isOnline

Как я понимаю, в какой то момент времени, придет ответ от сервера и будет вызван метод setIsOnline, и где то в недрах useState isOnline поменяет свое значение.

На сколько я все понимаю, теперь реакту нужно опять вызвать функцию FriendStatus, что бы та в свою очередь вызвала useFriendStatus, которая в свою очередь вызовет useState и вернет уже новое значение isOnline.

Вопрос который мне непонятен. От куда react узнает, что надо перерисовать FriendStatus, тоесть дернуть FriendStatus функцию? От куда он знает, что эта компонента зависит от useFriendStatus, которая в свою очередь зависит от const [isOnline, setIsOnline] = useState(null);

Или react, если поменяется isOnline тупо перерисовывает все компоненты, вызвает все функции комопнентов?

Спасибо

Answer 1

[gsaw]

Сорри, просто сразу не увидел. Ответ здесь нашелся

https://ru.reactjs.org/docs/hooks-faq.html#how-doe...

react действительно связывает хуки с компонентами, за счет отслеживания порядка вызовов useState. Тоесть зная какая компонента отрисовывается в данный момент, можно узнать какие хуки ей соотвествуют. И в следующий раз перерисовать только нужное.