Para evitarmos rerender em componentes que se mantenham com as mesmas propriedades e estado, tínhamos obrigatoriamente que utilizar um Class Component que implementava React.PureComponent ou ShouldComponentUpdate. Agora você poderá fazer o mesmo com componentes funcionais utilizando React.memo.
Dado um componente que recebe determinadas props e elas não são afetadas e alteradas, não faz sentido sempre darmos rerender neste componente. Assim, você poderá utilizar memo para ganhar performance e evitar renderizações desnecessárias.
Na computação, memoization é uma técnica de otimização usada principalmente para acelerar os programas de computador armazenando os resultados de chamadas de funções e retornando o resultado em cache quando as mesmas entradas ocorrem novamente.
Syntax
Memo é um higher order component, e você poderá utilizá-lo como wrapper em componentes já existentes.
A comparação ocorre somente no objeto props do seu componente. Caso queira controlar esta comparação, você pode passar uma função como segundo parâmetro. Se o retorno for true o rerender não irá ocorrer.
