Media Pengembangan Web & App | by APPKEY

Pembuatan WebsiteWeb ProgrammingApa itu React Hooks? Cari Jawabannya di Sini!

Apa itu React Hooks? Cari Jawabannya di Sini!

-

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.

Artikel Terkait  Cara Terbaik Melindungi WordPress dengan Plugin Wordfence

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

Artikel Terkait  Mempelajari Trick CSS Tingkat Lanjut

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.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang Website, Aplikasi, Desain, Video dan API langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Kategori

Blog Post Ranking 10

Rekomendasi 10 Aplikasi Pembuat Animasi 3D Terbaik. Ayo Cek!

Apakah Anda bercita-cita untuk menjadi seorang animator profesional? Belajar membuat animasi kini sudah menjadi hal mudah yang bisa dilakukan...

Cara Mudah Menambahkan Lokasi Alamat Bisnis Anda di Google Maps

Saat ingin hunting tempat makan atau tempat nongkrong terbaru, tak jarang beberapa dari Anda biasanya mendapatkan informasi terkini melalui...

Encoding Adalah : Proses Komunikasi Encoding dan Decoding

Jika kita dapat melihat percakapan antar komputer, mungkin akan terlihat seperti ini: "010110111011101011010010110". Bahasa ini disebut dengan biner, encoding...

Metadata Adalah? Fungsi dan Jenis-Jenis Metadata

Pernah mendengar istilah metadata? Mungkin, kita sering mendengar istilah metadata. Tetapi, banyak dari kita yang belum tahu arti dari metadata...

Cara Membuat Aplikasi di Playstore dengan Mudah

Membuat aplikasi di Playstore bisa Anda lakukan dengan mudah. Terdapat beberapa situs yang bisa membantu Anda untuk membuat aplikasi...

Looping Adalah Algoritma Perulangan: Berikut Contohnya

Jika anda sudah mendalami atau sedang mendalami dunia pemrograman terdapat sebuah konsep yang dapat memudahkan anda dalam menyusun struktur...

Rekomendasi 10 Aplikasi Coding Android Terbaik

Ketersediaan aplikasi coding Android memang banyak dicari oleh orang-orang yang sedang atau akan memulai untuk membuat aplikasi android. Jika...

7 Aplikasi Membuat Aplikasi Android Secara Offline

Aplikasi membuat aplikasi android saat ini banyak dicari penekun IT untuk membuat aplikasi Android secara offline tanpa harus menggunakan...

Domain Google? Apa Bedanya Dengan Domain Biasa?

Saat memutuskan untuk membuat website menjadi salah satu bentuk media digital marketing Anda dalam bersaing di zaman digital ini,...

4 Cara Mengatasi Autentikasi Google Play Store dengan Cepat dan Mudah

Apakah Anda sedang mengalami masalah autentikasi Google Play Store? Permasalahan autentikasi Google Play Store adalah permasalahan umum sering dialami...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya