Помогите пожалуйста понять как это работает?
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 тупо перерисовывает все компоненты, вызвает все функции комопнентов?
Спасибо
