Я делал обзор кода для своего коллеги и натолкнулся на код, который сразу же вызвал у меня тревогу.

<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()
  }
}

Это также вызвало некоторые другие проблемы. Что, если бы нам понадобилось перенести эти функции в другой контекст в будущем? Нам нужно будет отслеживать каждый раз, когда к этой функции обращаются context.actions.functionIWantToMove, и изменять контекст, в котором функция вызывается, то есть мне пришлось бы предоставить этому компоненту полный доступ к ВТОРОМУ контексту. Все для того, чтобы он мог получить доступ к одному фрагменту данных или вызвать единственную функцию.

Я быстро набросился на мерзавца, чтобы посмотреть, кто мог реализовать такой безответственный паттерн, и, конечно же, это был я. Ясно, что это ужасный способ делать что-то. Нам нужно было лучшее решение.

Реагируйте на помощь!

Одна из вещей, в которой React действительно хорош, - это разделение задач. Никакая особенность не воплощает это больше, чем крючки. Я вернулся к той строке, которая изначально вызвала красные флажки, я расширил код, чтобы предоставить дополнительный контекст:

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

Я просто хотел отметить, что представленные здесь фрагменты кода являются надуманными примерами, используемыми для того, чтобы подчеркнуть точку зрения, отредактированными, чтобы показать только соответствующие части. Я знаю, что они не пойдут как есть. Надеюсь, это все еще будет понятно.