Boolean: Bisa Jadi Bukan Teman Baikmu

Studi Kasus

Singkat cerita, Jum’at kemarin salah satu rekan kerja saya sedang membuat fitur “read more” untuk konten dengan tinggi lebih dari 300px (tidak ada tombol “read more” jika kurang). Ketika tombol tersebut di-click, seluruh isi konten baru akan ditampilkan.

const ContentWrapper = () => {
  const [hasReadMoreBtn, setHasReadMoreBtn] = useState(false)
  const [isExpanded, setIsExpanded] = useState(false)
  const contentRef = useRef(null)

  useEffect(() => {
    if (contentRef.current.offsetHeight > 300) setHasReadMoreBtn(true)
  }, [])

  const expand = () => setIsExpanded(true)

  return (
    <div>
      <div ref={contentRef}>
        ...
      </div>
      {hasReadMoreBtn && <button onClick={expand}>read more</button>}
    </div>
  )
}

Cukup jelas. Namun ada masalah baru: setHasReadMoreBtn(true) dijalankan setelah render. Artinya, jika tinggi content ternyata melebihi 300px, flash of content pun kemungkinan terjadi: awalnya user melihat seluruh isi content, lalu sepersekian detik kemudian tombol “read more” baru muncul

Ngakalinnya, jangan tampilkan konten ke user sebelum tinggi konten diketahui.

const ContentWrapper = () => {
  const [hasReadMoreBtn, setHasReadMoreBtn] = useState(false)
  const [isExpanded, setIsExpanded] = useState(false)
  const [isReady, setIsReady] = useState(false)
  const contentRef = useRef(null)

  useEffect(() => {
    if (contentRef.current.offsetHeight > 300) setHasReadMoreBtn(true)
    setIsReady(true)
  }, [])

  const expand = () => setIsExpanded(true)

  return (
    <div style={{ visibility: isReady ? 'visible' : 'hidden' }}>
      <div ref={contentRef}>
        ...
      </div>
      {hasReadMoreBtn && <button onClick={expand}>read more</button>}
    </div>
  )
}

Masalah selesai. Tapi entah kenapa ada sesuatu yang mengganjal. It feels hacky. Masa iya harus butuh 3 buah state hanya untuk membuat fitur se-simple ini. Belum lagi, dengan kombinasi tiga buah boolean saja, ada banyak kemungkinan yang bisa terjadi. Beberapa diantaranya justru tidak valid.

Pasti ada cara lain yang jauh lebih simple.

Solusi

Setelah me-review ulang behavior fitur ini dengan secarik kertas untuk dicorat-coret, saya mendapati bahwa sebenarnya requirement-nya cukup simple:

1. Sembunyikan konten sampai tinggi konten diketahui (hidden)
2. Jika tinggi konten kurang dari 300px, tampilkan seluruh isi konten (expanded)
3. Jika lebih,
   • konten bisa di-expand dengan tombol “read more” (expandable)
   • Setelah tombol “read more” di-klik, tampilkan seluruh isi konten (expanded)

Dari list ini terlihat bahwa secara behavior, konten hanya bisa memiliki salah satu dari ketiga state berikut: Hidden, Expandable, atau Expanded. Kata kuncinya “atau”. As you might have guessed, solusi terbaik untuk masalah ini adalah dengan memodelkannya menggunakan union.

type ContentDisplay = 'hidden' | 'expandable' |'expanded'

const ContentWrapper = () => {
  const [contentDisplay, setContentDisplay] = useState<ContentDisplay>('hidden')
  const contentRef = useRef(null)

  useEffect(() => {
    setContentDisplay(contentRef.current.offsetHeight > 300
      ? 'expandable'
      : 'expanded'
    )
  }, [])

  const expand = () => setContentDisplay('expanded')
  const hasReadMoreBtn = contentDisplay === 'expandable'

  return (
    <div style={{ visibility: contentDisplay === 'hidden'
      ? 'hidden'
      : 'visible'
    }}>
      <div ref={contentRef}>
        ...
      </div>
      {hasReadMoreBtn && <button onClick={expand}>read more</button>}
    </div>
  )
}

Dengan pendekatan ini, kita telah mengeliminasi kemungkinan-kemungkinan state yang tidak valid sekaligus meningkatkan code readability. Kita bisa belajar dari kasus ini bahwa memang mudah memodelkan suatu behavior dengan boolean, namun saya rasa masih ada cara lain yang lebih tepat. Bila dalam memecahkan masalah ada dua atau lebih boolean yang terlibat yang saling berkaitan, mundurlah selangkah dan mulai pahami kembali requirement dari fitur yang ingin diimplementasi. Ambillah secarik kertas dan tulis semua kondisi yang mungkin muncul. Mungkin dengan enum atau union biasa solusimu jadi lebih simple 😉

Oh ya, saya sampai lupa ternyata saya juga pernah mengulas kasus serupa di artikel yang lain: Tentang Loading State… 🙃

Kesimpulan

Boolean bukanlah segalanya. Bahkan mungkin eksistensinya bisa tergantikan dengan enum atau untagged union.

enum Bool { true, false }
// atau
type Bool = 'true' | 'false'

Siapa yang tahu? Setidaknya, sudah ada yang memodelkannya dengan union.

Sebagai penutup, video ini wajib ditonton bagi kamu yang ingin lebih mendalami tentang pemodelan business requirement ke dalam code:

Stay well, my friend!