私は同僚のためにコードレビューを行っていましたが、すぐに頭の中で赤い旗を掲げるコードに出くわしました。

<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、関数が呼び出されているコンテキストを変更する必要があります。つまり、そのコンポーネントに2番目のコンテキストへのフルアクセスを許可する必要があります。そのため、1つのデータにアクセスしたり、1つの関数を呼び出したりすることができます。

誰がそのような無責任なパターンを実装できたのかを確認するために、私は簡単なgitの非難をしました。もちろん、それは私でした。明らかに、これは物事を行うための恐ろしい方法です。より良い解決策が必要でした。

フックを反応させて救助しましょう！

Reactが本当に得意なことの1つは、関心の分離です。フック以上にこれを具体化する機能はありません。最初に危険信号を引き起こしたその行に戻り、コードを拡張してさらにコンテキストを提供しました。

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

ここで紹介するコードスニペットは、要点を説明するために使用される不自然な例であり、関連する部分のみを表示するように編集されていることに注意してください。そのままでは動作しないことは承知しております。うまくいけば、ポイントはまだ伝わっています。