How to avoid re-rendering?

Question

React

There is such a code:

When mounting, 4 renderings occur,

please explain why and how to get rid of this. thanks in advance

Answer 1

Try wrapping the function in React.memo()
Maybe it will get rid of unnecessary redraws if they occur with the same props

Answer 2

UPD:
1 option using hooks:

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

Option 2 to use the component class:

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

3 option wrap in React.memo

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

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

export default React.memo(MessagesChechked, isEqual)