Detail Info

Sebuah form input tinggi badan dan berat badan. Kita hitung apakah berat badan ideal dengan rumus Broca (contohnya), dan optimasi perhitungannya dengan useMemo.

Kode:

jsxCopyEditimport React, { useState, useMemo } from 'react';

function IdealWeightCalculator() {
  const [height, setHeight] = useState(170);
  const [weight, setWeight] = useState(65);

  const idealWeight = useMemo(() => {
    console.log('Calculating ideal weight...');
    return (height - 100) - ((height - 100) * 0.1); // rumus Broca
  }, [height]);

  const isIdeal = weight === Math.round(idealWeight);

  return (
    <div>
      <h1>Ideal Weight Checker</h1>
      <div>
        <label>Height (cm): </label>
        <input
          type="number"
          value={height}
          onChange={(e) => setHeight(+e.target.value)}
        />
      </div>
      <div>
        <label>Weight (kg): </label>
        <input
          type="number"
          value={weight}
          onChange={(e) => setWeight(+e.target.value)}
        />
      </div>

      <p>Ideal Weight: {Math.round(idealWeight)} kg</p>
      <p>Status: {isIdeal ? 'Ideal' : 'Belum ideal'}</p>
    </div>
  );
}

Penjelasan useMemo:

useMemo menyimpan hasil kalkulasi agar tidak dihitung ulang saat render kecuali height berubah.
Tanpa useMemo, setiap render akan menghitung ulang walau height tidak berubah.
Cocok untuk kalkulasi berat, data berat, statistik besar, dll.

useMemo – Kalkulasi Berat Badan Ideal (Optimisasi Perhitungan)