Aplicando pequenas melhorias em seus componentes React

Esse post talvez te ajude a dar uma melhorada na performance dos seus componentes.
Resumindo... 미국 메모, useMemo, useCallback semper que der... Isso é tudo pessoal... #brinks

Evite는 "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 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. 예:

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. Porem se o num mudar ele também irá fazer isso.
Logo se quisermos melhorar o codigo para ele filtrar somente quando o list/bar mudarem e usar um "memo"(olha a dica),
nos podemos fazer isso:

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

  // ...
}

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
베이스아도 엠 수아스 디펜시아스

// 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()
펑시오네 라 꼬르타망떼

Caso a sua funcao precision 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, nos 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 reference 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 브라우저.
추가 설치 개발자 도구(일반 F12) 프로필러 -> 설정 사용 "구성 요소가 렌더링될 때 업데이트 강조 표시".
법적 책임을 져야 합니다.