Eu estava fazendo uma revisão de código para um colega meu e me deparei com um código que imediatamente enviou uma bandeira vermelha em minha mente.

<Checkbox label={translationContext.getTranslation(checkboxLabel)}/>

... inside functional component
const getNextSection = () => {
  valid = context.actions.validateCurrentSection()
  
  if(!valid){
    return context.actions.showErrors()
  } else {
    return context.actions.getNextSection()
  }
}

Isso também introduziu alguns outros problemas. E se precisássemos mover essas funções para um contexto diferente no futuro? Precisaríamos rastrear toda vez que essa função fosse acessada via context.actions.functionIWantToMovee alterar o contexto em que a função está sendo chamada, o que significa que eu teria que dar a esse componente acesso total a um SEGUNDO contexto. Tudo para que pudesse acessar um dado ou chamar uma única função.

Fiz uma rápida git culpa para ver quem poderia ter implementado um padrão tão irresponsável e, claro, fui eu. Claramente esta é uma maneira horrível de fazer as coisas. Precisávamos de uma solução melhor.

Reaja ganchos para o resgate!

Uma das coisas em que o React é realmente bom é a separação de interesses. Nenhum recurso incorpora isso mais do que ganchos. Voltei para aquela linha que originalmente causou as bandeiras vermelhas, expandi o código para fornecer mais contexto:

import React, {useContext} from "react"
import {TranslationContext} from "../contexts/translation-context.tsx"
const CheckboxGroup = ({options}) => (
  translationContext = useContext(TranslationContext)
  <div>
    {options.map(option => (
      <Checkbox label={translationContext.getTranslation(option.text) />
      ))
    }
  </div>
)

import React from "react"
import {useTranslate} from "../translate"
const TranslatedCheckbox = ({label}) => {
  const translatedValue = useTranslate(label)
  
  return <Checkbox label={translatedValue} />
}

const CheckboxGroup = ({options}) => (
  <div>
    {options.map(
      option => <TranslatedCheckbox label={option.label}/>
     )
    }
  </div>
)

Eu só queria observar que os trechos de código apresentados aqui são exemplos artificiais usados ​​para fazer um ponto, editados para mostrar apenas as partes relevantes. Estou ciente de que eles não serão executados como estão. Esperemos que o ponto ainda se entenda.