Apa itu React Hooks? Cari Jawabannya di Sini!

Last Updated on December 11, 2021 by

React adalah salah satu framework JavaScript yang sangat disukai oleh banyak developer atau salah satu hal terbaik tentang React adalah penggunaan kelas dan komponen fungsional untuk membangun situs web, salah satunya adalah React Hooks.

Hook pada React memungkinkan developer untuk menggunakan status dan metode siklus hidup lainnya dalam komponen fungsional. React merekomendasikan untuk menggunakan sebanyak mungkin komponen fungsional sebagai pengganti komponen kelas.

Perbedaan kinerja mungkin dapat diabaikan dalam proyek-proyek kecil. Namun, itu akan sedikit membantu proyek-proyek besar.

Developer di Morean sering bekerja dengan hook tingkat lanjut. Namun, hook bukanlah konsep yang paling mudah dipelajari di React. Dalam artikel ini, kita akan melihat beberapa hook React yang umum digunakan dan implementasinya.

Apa itu React Hooks?

React Hooks adalah fitur yang baru dirilis pada versi React 16.8. Hooks membantu Anda untuk memakai state dan fitur React lainnya tanpa perlu menulis kelas apapun. Hooks adalah fungsi yang “menghubungkan” status React dan fitur siklus hidup dari komponen fungsi.

Akan tetapi, perlu diingat bahwa Hook dalam React tidak bekerja di dalam kelas. Namun, Hook memiliki tipe backward-compatible, yang berarti tidak mengandung perubahan yang melanggar.

Kumpulan React Hooks Form yang Banyak Dipakai

Berikut ini adalah kumpulan React Hooks Form yang banyak dipakai oleh para developer.

1. React Hooks Lib

React Hooks Lib memberi kita Hooks yang menyerupai metode siklus hidup komponen kelas React. Misalnya, ia menawarkan Hooks seperti useDidMount, yang berjalan saat komponen dipasang, dan useDidUpdate, yang berjalan saat komponen diperbarui.

Ia juga memiliki Hooks untuk mengelola status, seperti useCounter, yang menambahkan status nomor dengan fungsinya sendiri untuk mengelolanya. Anda bisa mencari tahu lebih jauh tentang React Hooks Lib di sini: https://github.com/beizhedenglong/react-hooks-lib.

Untuk menginstal paket, kita dapat menjalankan:

npm i react-hooks-lib --save

Kemudian gunakan beberapa Hooks dengan mengimpor mereka dari module. Anda dapat menggunakan useDidMount dengan menulis :

import React from "react";
import { useDidMount } from "react-hooks-lib";

export default function App() {
  useDidMount(() => {
    console.log("did mount");
  });

  return (
    <div className="Applikasi">
      <h1>Hello world</h1>
    </div>
  );
}

2. react-hanger

react-hanger adalah pustaka yang memberi kita React Hooks agar kita lebih mudah mengelola berbagai jenis status. Anda bisa download hooks ini di: https://github.com/kitze/react-hanger.

react-hanger datang dengan Hooks berikut:

• useInput – dapatkan dan atur nilai kontrol input
• useBoolean – dapatkan dan atur status Boolean
• useNumber – dapatkan dan atur status nomor
• useArray – dapatkan dan atur status array
• useOnMount – menjalankan kode saat komponen dipasang
• useOnUnmount – menjalankan kode saat komponen dilepas
• useStateful – dapatkan dan atur status komponen

Kita dapat menggunakan useInput sebagai berikut untuk membuat pemrosesan nilai input menjadi lebih sederhana:

import React from "react";
import { useInput } from "react-hanger";

export default function App() {
  const input = useInput("");

  return (
    <div>
      <input type="teks" value={input.value} onChange={input.onChange} />
      <p>{input.value}</p>
    </div>
  );
}

Kita dapat gunakan useNumber untuk mendapatkan seperangkat number state:

import React from "react";
import { useNumber } from "react-hanger";

export default function App() {
  const counter = useNumber(3, { lowerLimit: 1, upperLimit: 9 });

  return (
    <div>
      <p> {counter.value} </p>
      <button onClick={() => counter.increase()}> increase </button>
      <button onClick={() => counter.decrease()}> decrease </button>
    </div>
  );
}

Kita dapat mengatur nilai awal counter.value dengan argumen pertama, dan kita dapat mengatur batas bawah dan atas dari status counter.value dengan yang kedua. Hook useArray dan useBoolean bekerja dengan cara yang sama.

Untuk mengatur segala jenis status, kita dapat menggunakan useStateful Hook:

import React from "react";
import { useStateful } from "react-hanger";

export default function App() {
  const username = useStateful("sopo");

  return (
    <div>
      <p> {username.value} </p>
      <button onClick={() => username.setValue("sopo")}> sopo </button>
      <button onClick={() => username.setValue("jarwo")}> jarwo </button>
    </div>
  );
}

Hooks ini lebih baik daripada React useState Hook karena kita bisa mendapatkan nilai status dari properti value, dan kita bisa mengatur nilainya dengan metode setValue dari objek yang dikembalikan. Tidak diperlukan destructuring untuk mendapatkan fungsi state dan setter, tidak seperti useState Hook bawaan React.

3. React hookedUp

Seperti perpustakaan lain yang tak terhitung jumlahnya, React hookedUp memungkinkan kita mengelola status komponen. Tapi kita juga bisa menggunakannya untuk mengatur fokus dan hovering elemen HTML.

Muncul dengan Hooks yang mereplikasi fungsionalitas Hooks siklus hidup komponen kelas, serta beberapa timer dan Hooks jaringan yang berguna yang tidak disediakan oleh pustaka lain yang telah Anda ulas sejauh ini. Mari kita lihat useHover Hook, yang akan mendeteksi jika kita mengarahkan kursor ke input:

import React from "react";
import { useHover } from "react-hookedup";

export default function App() {
  const { hovered, bind } = useHover();

  return (
    <div>
      <p>{hovered ? "hovered" : "not hovered"}</p>
      <input {...bind} />
    </div>
  );
}

Anda hanya menyebarkan seluruh objek bind sebagai alat peraga untuk input. UseFocus Hook dapat digunakan dengan cara yang serupa.

4. react-use

Library Hooks react-use hadir dengan koleksi Hooks yang lebih besar daripada library lain yang terdaftar sejauh ini, termasuk Hooks untuk memanfaatkan berbagai perangkat keras yang dapat diakses browser. Itu juga dilengkapi dengan Hooks untuk menonton ukuran layar, gerakan, pengguliran, animasi, dan untuk menyesuaikan CSS secara dinamis, di antara banyak lainnya.

Misalnya, kita dapat menggunakan useMouse Hook untuk melihat posisi mouse pengguna:

import React from "react";
import { useMouse } from "react-use";

export default function App() {
  const ref = React.useRef(null);
  const { dokX, dokY, posX, posY, elX, elY, elW, elH } = useMouse(ref);

  return (
    <div ref={ref}>
      <div>
        Mouse posisi di dokumen - ({dokX}, {dokY})
      </div>
      <div>
        Mouse posisi di elemen - ({elX}, {elY})
      </div>
      <div>
        Element posisi- ({posX} , {posY})
      </div>
      <div>
        Element dimensi - {elW}x{elH}
      </div>
    </div>
  );
}

Kita dapat menggunakan dokX dan dokY untuk mendapatkan koordinat x dan y dari mouse dalam dokumen. Juga, kita dapat menggunakan properti elX dan elY untuk mendapatkan koordinat x dan y dari mouse dalam elemen yang dipantau. Anda menetapkan referensi ke elemen yang ingin Anda tonton.

5. React Recipes

React Recipes adalah library Hooks lain yang hadir dengan banyak custom Hooks. Ia menawarkan banyak Hooks yang sama dengan penggunaan reaksi, seperti Hooks yang menggunakan API browser, mengelola status, menjalankan kode async, dan lain sebagainya.

Misalnya, kita dapat menggunakan useSpeechSynthesis Hook untuk membuat browser berbicara:

import React, { useState } from "react";
import { useSpeechSynthesis } from "react-recipes";

export default function App() {
  const [value, setValue] = useState("");
  const [ended, setEnded] = useState(false);
  const onBoundary = (event) => {
    console.log(`${event.name}: ${event.elapsedTime} milliseconds.`);
  };
  const onEnd = () => setEnded(true);
  const onError = (event) => {
    console.warn(event);
  };

  const {
    cancel,
    speak,
    speaking,
    supported,
    voices,
    pause,
    resume
  } = useSpeechSynthesis({
    onEnd,
    onBoundary,
    onError
  });

  if (!supported) {
    return " Speech tidak didukung.";
  }

  return (
    <div>
      <input value={value} onChange={(event) => setValue(event.target.value)} />
      <button
        type="button"
        onClick={() => speak({ text: value, voice: voices[1] })}
      >
        Speak
      </button>
      <button type="button" onClick={cancel}>
        Cancel
      </button>
      <button type="button" onClick={pause}>
        Pause
      </button>
      <button type="button" onClick={resume}>
        Resume
      </button>
      <p>{speaking && "Suara sedang bicara"}</p>
      <p>{ended && "Suara sudah berakhir"}</p>
      <div>
        <h2>Voices:</h2>
        <div>
          {voices.map((voice) => (
            <p key={voice.name}>{voice.name}</p>
          ))}
        </div>
      </div>
    </div>
  );
}

Anda memanggil useSpeechSynthesis Hook, yang mengembalikan objek dengan berbagai properti:

• cancel – membatalkan sintesis ucapan
• speak – membuat browser mulai berbicara
• speaking – adalah Boolean yang memberi tahu kita apakah sintesis ucapan sedang dalam proses
• supported – adalah Boolean yang memberi tahu Anda apakah sintesis ucapan didukung di browser saat ini
• voices – memiliki daftar suara untuk dipilih
• pause – memungkinkan kita berhenti berbicara
• resume – mari kita lanjutkan berbicara

Aturan Menggunakan React Hooks

Hook mirip dengan fungsi JavaScript lainnya, tetapi Anda harus mengikuti dua aturan ini saat menggunakannya. Aturan ini dibuat untuk membuktikan bahwa stateful logic yang ada dalam suatu komponen hooks terlihat dalam kode sumbernya. Aturan-aturan itu adalah:

1. Hanya panggil React Hooks di tingkat atas

Jangan lakukan pemanggilan Hooks di dalam loop, condition, atau nested function. Hooks harus selalu digunakan pada level teratas dari fungsi React. Aturan ini berguna untuk membuktikan bahwa Hooks yang akan dipanggil berada di dalam urutan yang sama setiap saat komponen dirender.

2. Hanya panggil Hooks dari fungsi React

Anda tidak dapat memanggil React Hooks dari fungsi JavaScript biasa. Anda dapat memanggil Hooks dari komponen fungsi React sebagai gantinya. Hook juga dapat dipanggil dari Special Hook.

Itulah penjelasan tentang React Hooks yang banyak digunakan. Anda juga dapat mencoba salah satunya untuk menambahkan fungsionalitas ke dalam program Anda. Ingin tahu lebih banyak informasi terbaru tentang React Hooks? Jangan lupa untuk mengunjungi Web App di https://appkey.id/ atau download aplikasinya di Google Play Store agar Anda tidak ketinggalan informasi terbaru.