D. useMemo

useMemo digunakan untuk mengingat (memorize) nilai yang dihasilkan oleh suatu komputasi.

format penulisan

useMemo(()=> fn, deps)

useMemo menggunakan deps untuk menentukan apakan fn akan dipanggil atau tidak. Jika deps yang diberikan pada useMemo tidak berubah, maka useMemo akan otomatis mengembalikan value yang sama seperti pemanggilan fn sebelumnya, tanpa memanggil fn lagi

app/page.tsx

"use client";
import { useEffect, useState, memo, useCallback, useMemo } from "react";
import InputText from "./component/InputText";
import Button from "./component/Button";
import Link from "next/link";
import User from "./module/User";

const Home = () => {
  const [users, setUser] = useState<string[]>(["ihsan", "faisal", "arriq"]);
  const [text, setText] = useState<string>("");
  const handleDelete = useCallback((index: number) => {
    setUser((user) => {
      user.splice(index, 1);
      return [...user];
    });
  }, []);
  const handleAddUser = () => {
    setUser((user) => {
      return [...user, text];
    });

    setText("");
  };

  const result = () => {
    console.log("perhitungan berjalan");

    let i = 0;
    while (i < 20) i++;

    console.log(i)
    return users;
  };

  return (
    <section className="space-y-5">

      <User users={result()} handleDelete={handleDelete} />
      <InputText
        placeholder="ketik "
        id="text"
        name="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <Button title="tambah" colorSchema="blue" onClick={handleAddUser} />
    </section>
  );
};

export default Home;

app/page.tsx

"use client";
import { useEffect, useState, memo, useCallback, useMemo } from "react";
import InputText from "./component/InputText";
import Button from "./component/Button";
import Link from "next/link";
import User from "./module/User";

const Home = () => {
  const [users, setUser] = useState<string[]>(["ihsan", "faisal", "arriq"]);
  const [text, setText] = useState<string>("");
  const handleDelete = useCallback((index: number) => {
    setUser((user) => {
      user.splice(index, 1);
      return [...user];
    });
  }, []);
  const handleAddUser = () => {
    setUser((user) => {
      return [...user, text];
    });

    setText("");
  };

  const result = useMemo(() => {
    console.log("perhitungan berjalan");
    let i = 0;
    while (i < 200000000) i++;
    return users;
  }, [users]);
  return (
    <section className="space-y-5">
      <User users={result} handleDelete={handleDelete} />
      <InputText
        placeholder="ketik "
        id="text"
        name="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <Button title="tambah" colorSchema="blue" onClick={handleAddUser} />
    </section>
  );
};

export default Home;