polyak-888
@polyak-888
Js, React.js, css, frontend

Как избежать повторного рендеринга?

Есть такой код:
5dc71a0c6ef8b015261388.png
При монтировании происходит 4 рендеринга,
5dc71aaf9c2d0727009425.png
объясните плиз почему и как от этого избавиться. Спасибо заранее
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
Выполняется первичный рендеринг компонента (1). Срабатывает колбэк в useEffect. Первым делом выставляется стейт isLoading. Это вызывает рендеринг (2). Завершается фетч и обновляется claimsState в контексте. Это снова вызывает рендеринг (3). Наконец, вызывается колбэк промиса, который изменяет стейт isLoading. Это ещё раз вызывает рендеринг (4).
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
Hecc
@Hecc
Front-end. Дизайн. Шрифт.
Попробуйте обернуть функцию в React.memo()
Возможно оно избавит от лишних перерисовок, если они происходят с одинаковыми пропсами
Ответ написан
@akyl-kb
UPD:

1 вариант c использованием хуков:

const App = (...) => {
    ...
    const memorizedMessagesChecked = useMemo(() => <MessagesChechked {...props} />, [props.match.params.id])
    return (
        <SomeComponents />
        {memorizedMessagesChecked}
    )
}


2 вариант использовать компонент класс:

class MessagesChechked extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
        if (nextProps.match.params.id === this.props.match.params.id) {
            return false
        }
        return true
    }
    ...
}


3 вариант обернуть в React.memo

const MessagesChechked = (...) => {
   ...
}

const isEqual = (prevProps, nextProps) => {
   return prevProps.match.params.id !== nextProps.match.params.id
}

export default React.memo(MessagesChechked, isEqual)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы