Stavo facendo una revisione del codice per un mio collega e mi sono imbattuto in un codice che ha immediatamente inviato una bandiera rossa nella mia 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()
  }
}

Questo ha introdotto anche altri problemi. E se dovessimo spostare queste funzioni in un contesto diverso in futuro? Avremmo bisogno di rintracciare ogni volta che si accede a quella funzione tramite context.actions.functionIWantToMovee cambiare il contesto su cui viene chiamata la funzione, il che significa che dovrei dare a quel componente pieno accesso a un SECONDO contesto. Tutto in modo da poter accedere a un dato o chiamare una singola funzione.

Ho dato una rapida colpa per vedere chi avrebbe potuto implementare uno schema così irresponsabile e, ovviamente, sono stato io. Chiaramente questo è un modo orribile di fare le cose. Avevamo bisogno di una soluzione migliore.

Reagisci ganci in soccorso!

Una delle cose in cui React è davvero bravo è la separazione delle preoccupazioni. Nessuna caratteristica lo incarna più dei ganci. Sono tornato a quella riga che originariamente causava le bandiere rosse, ho ampliato il codice per fornire un po' più di contesto:

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

Volevo solo notare che i frammenti di codice qui presentati sono esempi inventati usati per sottolineare un punto, modificati per mostrare solo le parti rilevanti. Sono consapevole che non funzioneranno così com'è. Speriamo che il punto arrivi ancora.