Вызваны ли хуки в каждом рендере?

Question

Я использую контекстные API и ловушки, есть 20 переменных состояния, в каждом изменении (настройке состояний) функция вызывает снова или повторно, так что я беспокоюсь о вызове функций ловушек.

Пример, если яиспользовать useState, useReducer, useMemo, useCallback они вызываются снова при любом повторном рендеринге?

function GroupProvider(props) {

    const socket = useMemo(()=> io(url), [socket]);
    const [grouplist, setGrouplist] = useState([]);
    const [refreshid, setRefreshid] = useState('');
    const [messages, setMessages] = useState({});
    const [ppl, setPpl] = useState(people);
    const [groupname, setGroupname] = useState(name);
    const [groupimg, setGroupimg] = useState(img);
    const [groupnamesaving, setGroupnamesaving] = useState(false);
    const [groupimgsaving, setGroupimgsaving] = useState(false);
    const [editgroupname, setEditgroupname] = useState(false);
    const [addingmember, setAddingmember] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [leavinggroup, setLeavinggroup] = useState(false);
    const [changeAdminModal, setChangeAdminModal] = useState(false);
    const [changingAdmin, setChangingAdmin] = useState(false);
    const [loadingModal, setLoadingModal] = useState(false);

}

Здесь, если при каждом повторном рендеринге перехватывает вызовы функций, это может повлиять на производительность.

Answer 1

ОБНОВЛЕНИЕ: Когда я консоль регистрирую библиотеку реагирования разработки внутри useState и загружаю страницу с 1 использованием useState, при первом рендеринге я получаю 23 вызова useState.

При повторном рендеринге срабатываетпри изменении состояния я получаю 3 вызова useState.

В том же компоненте у меня есть useEffect со вторым аргументом [].При первом рендере он вызывается из библиотеки реагирования 12 раз.При повторном рендеринге, вызванном изменением состояния, он вызывается один раз.

Он действительно вызывает их каждый раз.

Я отредактировал этот ответ, чтобы неверная информация не размещалась.

Answer 2

Всегда используйте крючки на верхнем уровне вашей функции React.Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента.

Ссылка: - https://reactjs.org/docs/hooks-rules.html

Answer 3

Да, они вызываются при каждом рендеринге, при первом рендеринге он инициализирует ячейку памяти, при повторном рендеринге он читает значение текущей ячейки:

Когда вы вызываете Hook, как useState(), он читает текущую ячейку (или инициализирует ее во время первого рендеринга), а затем перемещает указатель на следующую ячейку.Вот как несколько вызовов useState () получают независимое локальное состояние.

https://reactjs.org/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components