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

Question

[Виктор]

Есть такой код:

При монтировании происходит 4 рендеринга,

объясните плиз почему и как от этого избавиться. Спасибо заранее

Answer 1

[Андрей Hecc]

Попробуйте обернуть функцию в React.memo()
Возможно оно избавит от лишних перерисовок, если они происходят с одинаковыми пропсами

Comments

[Виктор]

Пробовал, все тоже самое, из пропсов мне приходит только id, которое я получаю из адресной строки

Answer 2

[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)

Comments

[Виктор]

Так useEffect отработает только один раз при любом раскладе, так как в качестве зависимости я установил пустой массив