יותר מדי פעמים אני רואה קוד עם כוונות טובות שלא עומד במבחן הזמן. במקרה של ריאקט תבנית מאוד בעייתית היא הכנסת לוגיקה לתוך ה JSX. זה מתחיל פשוט עם איזה סימן שאלה נקודותיים:

function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      {text == 0 ? <Text1 /> : <Text2 />}
    </div>
  )
}

אבל מהר מאוד הופך למפלצת.

מה עושים במקום? מנגנון קל הוא להוציא את הקוד המכוער לקומפוננטה נפרדת שחיה רק בשביל הלוגיקה הזאת. החלטנו שצריך להתלבט איזה קומפוננטה להציג? בואו נעביר את זה לקומפוננטה נפרדת ונקבל:

function Text({id}) {
  if (id === 0) {
    return <Text1 />
  } else {
    return <Text2 />
  }
} 


function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      <Text id={text} />
    </div>
  )
}

בשלב הבא אם נצטרך מנגנון יותר גנרי (למשל כי נצטרך שוב לבחור בין כמה קומפוננטות) נוכל להפוך את Text לפונקציה כללית ונקבל:

function Text1({color}) {
  return <p style={{color}}>Text 1</p>
}

function Text2({color}) {
  return <p style={{color}}>Text 2</p>
}

const Toggle = (...components) => (props) => {
  const cls = components[props.id]
  return React.createElement(cls, props);
} 

const Text = Toggle(Text1, Text2);

function App() {
  const [text, setText] = useState(0);
  return (
    <div>
      <button onClick={() => setText(t => (t + 1) % 2)}>Toggle</button>
      <Text id={text} color="red" />
    </div>
  )
}