O código limpo é mais do que apenas código funcional. O código limpo é fácil de ler, simples de entender e bem organizado. Neste artigo, veremos oito maneiras de escrever um código React mais limpo.

Ao examinar essas sugestões, é importante lembrar que são exatamente isso: sugestões. Se você discordar de qualquer um deles, tudo bem. No entanto, essas são práticas que considero úteis para escrever meu próprio código React.

1. Renderização condicional apenas para uma condição

Se você precisar renderizar condicionalmente algo quando uma condição for

e não renderizar nada quando uma condição for

, não use um operador ternário. Em vez disso, use o operador

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueBad = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText ? <p>A condição deve ser true!</p> : null}
    </div>
  )
}

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueGood = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText && <p>A condição deve ser true!</p>}
    </div>
  )
}

2. Renderização condicional em qualquer condição

Se você precisar renderizar condicionalmente uma coisa quando uma condição for 

 e renderizar outra coisa quando a condição for 

import React, { useState } from 'react'

export const ConditionalRenderingBad = () => {
  const [showConditionOneText, setShowConditionOneText] = useState(false)

  const handleClick = () =>
    setShowConditionOneText(showConditionOneText => !showConditionOneText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText && <p>A condição deve ser true!</p>}
      {!showConditionOneText && <p>A condição deve ser false!</p>}
    </div>
  )
}

import React, { useState } from 'react'

export const ConditionalRenderingGood = () => {
  const [showConditionOneText, setShowConditionOneText] = useState(false)

  const handleClick = () =>
    setShowConditionOneText(showConditionOneText => !showConditionOneText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionOneText ? (
        <p>A condição deve ser true!</p>
      ) : (
        <p>A condição deve ser false!</p>
      )}
    </div>
  )
}

A prop truthy pode ser fornecido a um componente com apenas o nome prop sem um valor como este: 

import React from 'react'

const HungryMessage = ({ isHungry }) => (
  <span>{isHungry ? 'Estou com fome' : 'Estou cheio'}</span>
)

export const BooleanPropBad = () => (
  <div>
    <span>
      <b>Esta pessoa está com fome: </b>
    </span>
    <HungryMessage isHungry={true} />
    <br />
    <span>
      <b>Esta pessoa está cheia: </b>
    </span>
    <HungryMessage isHungry={false} />
  </div>
)

import React from 'react'

const HungryMessage = ({ isHungry }) => (
  <span>{isHungry ? 'Estou com fome' : 'Estou cheio'}</span>
)

export const BooleanPropGood = () => (
  <div>
    <span>
      <b>Esta pessoa está com fome: </b>
    </span>
    <HungryMessage isHungry />
    <br />
    <span>
      <b>Esta pessoa está cheia: </b>
    </span>
    <HungryMessage isHungry={false} />
  </div>
)

Um valor do tipo string em uma prop pode ser passado em aspas duplas sem o uso de chaves ou crases

import React from 'react'

const Greeting = ({ personName }) => <p>Hi, {personName}!</p>

export const StringPropValuesBad = () => (
  <div>
    <Greeting personName={"John"} />
    <Greeting personName={'Matt'} />
    <Greeting personName={`Paul`} />
  </div>
)

import React from 'react'

const Greeting = ({ personName }) => <p>Hi, {personName}!</p>

export const StringPropValuesGood = () => (
  <div>
    <Greeting personName="John" />
    <Greeting personName="Matt" />
    <Greeting personName="Paul" />
  </div>
)
view raw

Se uma função que lida com eventos passada para o componente recebe somente um argumento, você pode passá-la diretamente na prop, desta forma: 

Você não precisa quebrar a função em uma função anônima como este exemplo: 

import React, { useState } from 'react'

export const UnnecessaryAnonymousFunctionsBad = () => {
  const [inputValue, setInputValue] = useState('')

  const handleSubmit = e => {
    setInputValue(e.target.value)
  }

  return (
    <>
      <label htmlFor="name">Name: </label>
      <input id="name" value={inputValue} onChange={e => handleSubmit(e)} />
    </>
  )
}

import React, { useState } from 'react'

export const UnnecessaryAnonymousFunctionsGood = () => {
  const [inputValue, setInputValue] = useState('')

  const handleSubmit = e => {
    setInputValue(e.target.value)
  }

  return (
    <>
      <label htmlFor="name">Name: </label>
      <input id="name" value={inputValue} onChange={handleSubmit} />
    </>
  )
}

Ao passar um componente como um prop para outro componente, você não precisa envolver este componente passado em uma função se o componente não aceitar nenhuma prop.

import React from 'react'

const CircleIcon = () => (
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
)

const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (
  <div>
    <p>Below is the icon component prop I was given:</p>
    <IconComponent />
  </div>
)

export const UnnecessaryAnonymousFunctionComponentsBad = () => (
  <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} />
)

import React from 'react'

const CircleIcon = () => (
  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>
)

const ComponentThatAcceptsAnIcon = ({ IconComponent }) => (
  <div>
    <p>Below is the icon component prop I was given:</p>
    <IconComponent />
  </div>
)

export const UnnecessaryAnonymousFunctionComponentsGood = () => (
  <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} />
)

 são ignoradas, então não se preocupe em fornecer um fallback se não houver problema a prop ter valor 

import React from 'react'

const ButtonOne = ({ handleClick }) => (
  <button onClick={handleClick || undefined}>Click me</button>
)

const ButtonTwo = ({ handleClick }) => {
  const noop = () => {}

  return <button onClick={handleClick || noop}>Click me</button>
}

export const UndefinedPropsBad = () => (
  <div>
    <ButtonOne />
    <ButtonOne handleClick={() => alert('Clicked!')} />
    <ButtonTwo />
    <ButtonTwo handleClick={() => alert('Clicked!')} />
  </div>
)

import React from 'react'

const ButtonOne = ({ handleClick }) => (
  <button onClick={handleClick}>Click me</button>
)

export const UndefinedPropsGood = () => (
  <div>
    <ButtonOne />
    <ButtonOne handleClick={() => alert('Clicked!')} />
  </div>
)

8. Definir estado que depende do estado anterior

Sempre defina o estado como uma função do estado anterior se o novo estado depender do anterior. As atualizações de estados no React podem ser agrupadas e não escrever as atualizações desta forma podem te levar a resultados inesperados.

import React, { useState } from 'react'

export const PreviousStateBad = () => {
  const [isDisabled, setIsDisabled] = useState(false)

  const toggleButton = () => setIsDisabled(!isDisabled)

  const toggleButton2Times = () => {
    for (let i = 0; i < 2; i++) {
      toggleButton()
    }
  }

  return (
    <div>
      <button disabled={isDisabled}>
        I'm {isDisabled ? 'disabled' : 'enabled'}
      </button>
      <button onClick={toggleButton}>Toggle button state</button>
      <button onClick={toggleButton2Times}>Toggle button state 2 times</button>
    </div>
  )
}

import React, { useState } from 'react'

export const PreviousStateGood = () => {
  const [isDisabled, setIsDisabled] = useState(false)

  const toggleButton = () => setIsDisabled(isDisabled => !isDisabled)

  const toggleButton2Times = () => {
    for (let i = 0; i < 2; i++) {
      toggleButton()
    }
  }

  return (
    <div>
      <button disabled={isDisabled}>
        I'm {isDisabled ? 'disabled' : 'enabled'}
      </button>
      <button onClick={toggleButton}>Toggle button state</button>
      <button onClick={toggleButton2Times}>Toggle button state 2 times</button>
    </div>
  )
}

As práticas a acima não são específicas do React, mas sim boas práticas para escrever código limpo em JavaScript (ou qualquer linguagem de programação, nesse caso).

Como escrever código limpo no React

O código limpo é mais do que apenas código funcional. O código limpo é fácil de ler, simples de entender e bem organizado. Neste artigo, veremos duas maneiras de escrever um código React mais limpo.

Se você precisar renderizar condicionalmente uma coisa quando uma condição for

e renderizar outra coisa quando a condição for