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.

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.

Bora lá?

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

Se você precisar renderizar condicionalmente algo quando uma condição for true e não renderizar nada quando uma condição for false, não use um operador ternário. Em vez disso, use o operador &&.

Como não fazer:

1import React, { useState } from 'react'
2
3export const ConditionalRenderingWhenTrueBad = () => {
4  const [showConditionalText, setShowConditionalText] = useState(false)
5
6  const handleClick = () =>
7    setShowConditionalText(showConditionalText => !showConditionalText)
8
9  return (
10    <div>
11      <button onClick={handleClick}>Toggle the text</button>
12      {showConditionalText ? <p>A condição deve ser true!</p> : null}
13    </div>
14  )
15}

Uma solução:

1import React, { useState } from 'react'
2
3export const ConditionalRenderingWhenTrueGood = () => {
4  const [showConditionalText, setShowConditionalText] = useState(false)
5
6  const handleClick = () =>
7    setShowConditionalText(showConditionalText => !showConditionalText)
8
9  return (
10    <div>
11      <button onClick={handleClick}>Toggle the text</button>
12      {showConditionalText && <p>A condição deve ser true!</p>}
13    </div>
14  )
15}

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

Se você precisar renderizar condicionalmente uma coisa quando uma condição for true e renderizar outra coisa quando a condição for false, use um operador ternário.

Como não fazer:

1import React, { useState } from 'react'
2
3export const ConditionalRenderingBad = () => {
4  const [showConditionOneText, setShowConditionOneText] = useState(false)
5
6  const handleClick = () =>
7    setShowConditionOneText(showConditionOneText => !showConditionOneText)
8
9  return (
10    <div>
11      <button onClick={handleClick}>Toggle the text</button>
12      {showConditionOneText && <p>A condição deve ser true!</p>}
13      {!showConditionOneText && <p>A condição deve ser false!</p>}
14    </div>
15  )
16}

Como fazer:

1import React, { useState } from 'react'
2
3export const ConditionalRenderingGood = () => {
4  const [showConditionOneText, setShowConditionOneText] = useState(false)
5
6  const handleClick = () =>
7    setShowConditionOneText(showConditionOneText => !showConditionOneText)
8
9  return (
10    <div>
11      <button onClick={handleClick}>Toggle the text</button>
12      {showConditionOneText ? (
13        <p>A condição deve ser true!</p>
14      ) : (
15        <p>A condição deve ser false!</p>
16      )}
17    </div>
18  )
19}

Conclusão

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).

Extraia lógica complexa em funções claramente nomeadas.

Extraia números mágicos em constantes.

Use variáveis claramente nomeadas.

Divirta-se e boa programação!