React memo method

[GustavoWinter]

https://github.com/vTarnoschi/giphy-api/blob/320e6d85ba145084bf7b413c3f5b3e417e270fdb/src/Components/Gifs/index.jsx#L1

Olá vTarnoshi, faço parte do time da 87labs e gostaria de parabeniza-lo pela conclusão do teste.

Durante a revisão do projeto notei que vc fez uso do método memo em vários componentes, gostaria de entender quais fatores te levaram a usar o mesmo e como vc fez para medir a efetividade nos componentes usados ?

[vTarnoschi]

https://github.com/vTarnoschi/giphy-api/blob/320e6d85ba145084bf7b413c3f5b3e417e270fdb/src/Components/Gifs/index.jsx#L1

Olá vTarnoshi, faço parte do time da 87labs e gostaria de parabeniza-lo pela conclusão do teste.

Durante a revisão do projeto notei que vc fez uso do método memo em vários componentes, gostaria de entender quais fatores te levaram a usar o mesmo e como vc fez para medir a efetividade nos componentes usados ?

Olá Gustavo, eu geralmente utilizo o "memo" quando os componentes possuem props, dessa forma eu garanto que sempre na renderização, caso haja alguma diferença, o componente possa se atualizar, evitando updates desnecessários.

Eu geralmente uso o "React-Dev-Tools" com a opção de "Highlight Updates" habilitada para verificar se o componente está sofrendo alterações ou não.

[GustavoWinter]

Show, confesso que nao conhecia essa ferramenta. Andei lendo sobre até pra pode conversar contigo a respeito.

https://github.com/vTarnoschi/giphy-api/blob/320e6d85ba145084bf7b413c3f5b3e417e270fdb/src/Containers/Favoritos/index.jsx#L42

nesse container de favoritos, vc fez uso do memo. Notei que apenas o handleOnRemoveFavorite e o handleOnCopy assim como os demais foram declaradas como arrow functions normais sem o uso do useCallback.

Foi feito assim por algum motivo especifico ?

[vTarnoschi]

Show, confesso que nao conhecia essa ferramenta. Andei lendo sobre até pra pode conversar contigo a respeito.

https://github.com/vTarnoschi/giphy-api/blob/320e6d85ba145084bf7b413c3f5b3e417e270fdb/src/Containers/Favoritos/index.jsx#L42

nesse container de favoritos, vc fez uso do memo. Notei que apenas o handleOnRemoveFavorite e o handleOnCopy assim como os demais foram declaradas como arrow functions normais sem o uso do useCallback.

Foi feito assim por algum motivo especifico ?

No handleOnRemoveFavorite eu utilizei pois a função usa o método onRemoveFavorite, dessa forma, caso a função sofra alteração, uma nova é criada com as novas alterações.

A função handleOnCopy não houve a necessidade pois eu não dependo de nenhuma função para que ocorra a atualização, assim acontece com a handleClose

A função pushHome, eu esqueci de incluir o useCallback.

[GustavoWinter]

Entendi, então, levantei este ponto, pois declarando a funçao do handleOnCopy desta forma, sempre que o componente for re-renderizado a referencia vai mudar e consequentemente essa mudança vai fazer com que o componente renderize novamente.

Vou compartilhar um link aqui contigo onde explica melhor isso. Ai me diga o que achou e se isso realmente ta acontecendo nesse componente.

https://dmitripavlutin.com/use-react-memo-wisely/#:~:text=When%20to%20avoid%20React.&text=If%20the%20component%20doesn't,incorrectly%20can%20even%20harm%20performance.

[vTarnoschi]

Entendi, então, levantei este ponto, pois declarando a funçao do handleOnCopy desta forma, sempre que o componente for re-renderizado a referencia vai mudar e consequentemente essa mudança vai fazer com que o componente renderize novamente.

Vou compartilhar um link aqui contigo onde explica melhor isso. Ai me diga o que achou e se isso realmente ta acontecendo nesse componente.

https://dmitripavlutin.com/use-react-memo-wisely/#:~:text=When%20to%20avoid%20React.&text=If%20the%20component%20doesn't,incorrectly%20can%20even%20harm%20performance.

Sim, acredito que eu devia ter incluído o useCallback na handleOnCopy também. A referência sempre vai mudar todas as vezes que for feita a cópia da url.

[GustavoWinter]

Show mano, se quiser fazer a correção e subir, não tem problema.

[vTarnoschi]

Show mano, se quiser fazer a correção e subir, não tem problema.

Teria mais alguma correção que tu recomendaria eu fazer?

[vTarnoschi]

Show mano, se quiser fazer a correção e subir, não tem problema.

Realizei algumas correções. Agradeço pela dica.