1

Использую функциональный компонент react с хуками.

const [loaded, setLoaded] = React.useState(null);
const [title, setTitle] = React.useState(title);

React.useEffect(() => {
    //...
    setLoaded(true);
    setTitle(title);
}, []);

В этом случае рендер компонента происходит два раза. С одной стороны вроде как логично.

Но так же есть у меня обработчик на checkbox в этом компоненте

const changeHandler = event => {
    //...
    setTotal(new_total);
    setError(false);
};

В этом случае не происходит два рендеринга, хотя state меняется тоже 2 раза. Не могу понять почему происходит именно так.

3 ответа 3

2
  • Обработчик changeHandler висит на компоненте - так что changeHandler вызывается из кода React. Поэтому React может отследить все вызовы setState, сделанные во время работы changeHandler, и, уже после того, как changeHandler вернул управление, сделать один новый рендер.

  • В случае хука - ситуация та же, React знает, когда хук начинает работать, и когда - заканчивает. И вроде бы тоже должен сделать один новый рендер. Вот только - код в вопросе скорее всего упрощен, и из него выброшен вызов api. Реальный код там скорее всего выглядит так:

    React.useEffect(() => {
        loadViaApi(....).then(() => {
           setLoaded(true);
           setTitle(title);
         }
    }, []);
    

И вызовы setState происходят не во время работы хука, а позже, когда отработает асинхронный апи. React никак не может узнать, когда ж именно доработает callback на апи - т.к. он вообще о нем ничего не знает. И, соответственно, не может определить момент, когда ж можно сделать один отложенный рендер. И поэтому делает рендер на каждый вызов setState.

Стандартный способ починки такого - запихнуть loaded и title свойствами в один объект в стейте.

0

В этом случае рендер компонента происходит два раза.

useEffect выполняется после каждого рендера. Т.е.:

  • Происходит первый рендер с данными loaded = null и title = title
  • Выполняется функция из useEffect, которая меняет данные, использующиеся в рендере
  • Происходит второй рендер с loaded = true и title = newTitle

В этом случае не происходит два рендеринга

Тут сказать сложно, поскольку не понятно, что за событие вызывает changeHandler

0

Я где то видел пост, что такая проблема может возникать при использовании

import { BrowserRouter } from 'react-router-dom'

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.