A programação é frequentemente considerada um hobbie ao invés de uma profissão e existem boas razões para isso.

Nós, como desenvolvedores, devemos sempre buscar a melhor qualidade em qualquer código que escrevemos e, para isso, existem alguns princípios a serem seguidos em um projeto. Um dos mais utilizados é o DRY - Don't Repeat Yourself.

Abaixo você pode conferir 5 técnicas comumente utilizadas para evitar a duplicação de código em projetos com React.

Buscar dados em algum serviço remoto é uma das ações mais comum e mais básica em qualquer aplicação React. Mesmo sendo básica, muitos iniciantes acabam cometendo algum erro ao escrevê-las. Veja a evolução mais comum nos projetos:

Etapa 1. Realizar chamadas dentro dos componentes

No início é comum desenvolvedores realizarem requisições à APIs dentro do próprio componente, principalmente porque a maioria dos tutoriais nos mostra isso.

Etapa 2. Abstrair a lógica em algum gerenciador de estado ou outro armazenamento

Nesta etapa, costuma-se remover a requisição à API de seu componente e colocá-la dentro da store (como redux ou context), mas isso não é suficiente, ainda há repetição de código.

 para gerenciar todas as requisições HTTP da sua aplicação. Você pode usar somente o 

 para lidar com as requisições para você, mas saiba que detectar o estado de carregamento e lidar com erros pode ser um pouco trabalhoso e complicado para você.

reserve um tempo para estudar bibliotecas como a 

. Ela fornece algumas funcionalidades excelentes que podem ser úteis para qualquer tamanho de aplicação, no entanto, saiba que ela não remove a necessidade de utilizar bibliotecas como o 

Em minha experiência, vi pessoas cometendo erros em muitos lugares. Chamar toasts em todos os componentes geralmente não é uma boa ideia. Existem alguns cenários onde nós gostaríamos de dar algum feedback ao usuário.

Middlewares (interceptam qualquer ação antes de chegar à store do Redux) são ótimos para lidar com a maior parte dos erros. Interceptar os erros que voltam de chamadas HTTP e mostrar um toast ao usuário. Nas configurações de um projeto Redux, pode ser implementado o seguinte:

const ErrorMiddleware = (state) => (next) => (action) => {
    const response = action.payload;
    if (response instanceof HttpErrorResponseModel) {
        next(CommonAction.showErrorToast(action.payload.message))
    }
    next(action)
}

 para detectar erros relacionados a problemas de carregamento nos componentes. Dessa forma, não precisamos colocar verificações de nulos em todas as partes do código.

Outro momento em que gostaríamos de exibir um aviso ao usuário é quando ocorre algum erro de validação em um formulário preenchido pelo usuário.

Tente utilizar algum tipo de biblioteca de validação de formulários (por exemplo, o 

) para lidar com erros de validação e dar algum feedback ao usuário de forma automática. Ou você pode utilizar bibliotecas como 

Acredito que exista algum problema, mas algumas vezes, as pessoas que iniciam com o React falham em entender o recurso mais poderoso do React, ou seja, Componente Reutilizável.

Sempre tente quebrar os componentes em pequenas peças, isso tem variados benefícios:

Ai está. Estas são algumas técnicas que você pode aplicar ao seu projeto para seguir o princípio DRY no React. Estas não são soluções à prova de balas, mas entender como isso funciona pode levar você muito longe.

5 princípios do DRY 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 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