Estaba haciendo una revisión de código para un colega mío y encontré un código que inmediatamente envió una bandera roja en mi 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()
  }
}

Esto también introdujo algunos otros problemas. ¿Qué pasaría si necesitáramos mover estas funciones a un contexto diferente en el futuro? Tendríamos que rastrear cada vez que se accede a esa función a través context.actions.functionIWantToMovede , y cambiar el contexto al que se llama la función, lo que significa que tendría que darle a ese componente acceso completo a un SEGUNDO contexto. Todo para que pudiera acceder a una pieza de datos o llamar a una sola función.

Hice un rápido git culp para ver quién podría haber implementado un patrón tan irresponsable y, por supuesto, fui yo. Claramente, esta es una manera horrible de hacer las cosas. Necesitábamos una mejor solución.

¡Reacciona ganchos al rescate!

Una de las cosas en las que React es realmente bueno es la separación de preocupaciones. Ninguna característica encarna esto más que los ganchos. Volví a esa línea que originalmente causó las banderas rojas, amplié el código para proporcionar más 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>
)

Solo quería señalar que los fragmentos de código que se muestran aquí son ejemplos artificiales que se usan para demostrar un punto, editados para mostrar solo las partes relevantes. Soy consciente de que no funcionarán como están. Esperemos que el punto todavía se entienda.