Aplicando pequenas melhorias em seus componentes React

Esse post talvez te ajude a dar uma melhorada na performance dos seus componentes.
Resumindo... usa memo, useMemo, useCallback sempre que der... Isso é tudo pessoal... #brinks

Evite re-renders nas "crianças"

Caso vc tenha um component que precisa fazer um re-render por algum motivo... lembre-se que todos os components filhos
também irão sofrer esse re-render. Para evitarmos esse processo "pesadaum" podemos usar o memo() do react nos filhos

import React, { memo } from 'react'

const Luke = props => (
  ...
)

export default memo(Luke)

// --------------------------

import Luke from '../Luke'

const Vader = ({ children, isLukeJedi }) => {
  return (
    <>
      <Luke isJedi={isLukeJedi} />
      {children}
    </>
  )
}

Logo... luke só sofrerá re-render se a propriedade isJedi mudar de valor

Evite processos desnecessários

Caso você possua algum objeto, valor, array ou qualquer coisa fruto de um filter ou algo mais complexo
você não precisa ficar "recalculando" isso toda vez. Por exemplo:

function foo({ bar, num, list }) {
  const filteredList = list.filter(item => item.bar === bar)

  ...
}

Se o list ou bar mudarem, faz sentido a gente fazer o filter novamente. Porém se o num mudar ele também irá fazer isso.
Logo se quisermos melhorar o código para ele filtrar somente quando o list/bar mudarem e usar um "memo" (olha a dica),
nós podemos fazer isso:

function foo({ bar, num, list }) {
  const filteredList = useMemo(() => list.filter(item => item.bar === bar), [list, bar])

  // ...
}

Otimize as chamadas das suas funções

Se vc tem alguma função que usa alguma prop e ela tem um custo alto de processamento, você pode fazer um memoize do resultado da mesma
baseado em suas dependências

// essa funcao sera chamada executando sempre a parte pesada
const foo = () => {
  // ...
  return prop1 * prop2
}

// essa funcao ira pegar o resultado que está memorizado da ultima chamada
// so ira executar novamente o processo pesado quando uma das dependencias mudar

const memoFoo = useCallback(() => {`
  // ...
  return prop1 * prop2
}, [prop1, prop2])

Caso vc tenha funções que precisam ser passadas para props de components filhos é uma boa usar esse useCallback, para que o memo()
funcione la corretamente

Caso a sua funcao precise de um parametro e nao mexa com props... pense se não vale a pena colocá-la do lado de fora do seu component,
pois toda vez que sofrer re-render a sua variável será reatribuída com a função

Não quebre a cabeça com o DOM

Em certas circunstâncias, nós precisamos acessar o DOM e muitas vezes o fazemos com o nosso querido document.querySelector().
Porém... podemos fazer de uma forma mais prática usando o useRef que cria uma referência para algo e esse algo pode ser acessado com .current

const Foo = () => {
  const ref = useRef()

  // ... aqui poderiamos verificar button através de ref.current
  // porem lembre-se que no primeiro render ele está como undefined.. 
  // afinal precisamos que ele seja renderizado podermos acessá-lo

  return (
    <Button ref={ref}>
      botao
    </Button>
  )
}

Outras coisinhas a mais

Caso você ainda tenha dúvidas sobre se o seu component está "pesadaum"... use o react devtools... é um plugin excelente para o seu browser.
Após instalado abra o seu Developer Tools (normalmente F12) e vá para o Profiler -> settings e ative a opção " Highlight updates when components render.".
Isso vai te dar um Norte bem legal.