Pengantar Bereaksi useCallBack()

Saat membuat situs web menggunakan React, penting untuk mempertimbangkan seberapa cepat situs dimuat dan seberapa cepat pengguna dapat berinteraksi dengannya. Salah satu cara untuk mempercepat situs web React adalah dengan mencegahnya melakukan pekerjaan yang tidak perlu, seperti merender ulang bagian halaman yang belum berubah.

FungsiuseCallback() dalam React membantu kita mencapai hal ini dengan mengingat fungsi yang kita definisikan dan hanya membuatnya kembali jika diperlukan.Ini dapat membuat situs web lebih cepat dan lebih responsif bagi pengguna. React adalah pustaka JavaScript front-end paling populer, menurut survei Stack Overflow pada tahun yang sama, menunjukkan bahwa useCallback() kemungkinan besar digunakan secara luas di industri ini.

Dalam artikel ini, kami akan menjelaskan apa itu useCallBack() di React dan cara menggunakannya di kode React kami untuk meningkatkan kinerja.

Apa itu useCallBack di React?

useCallback() adalah fungsi pengait yang disediakan oleh React yang digunakan untuk memoise suatu fungsi. Dengan kata lain, ini membantu mengoptimalkan kinerja komponen dengan menghindari rendering ulang yang tidak diinginkan.

Di React, ketika status atau prop komponen berubah, komponen dirender ulang untuk mencerminkan nilai yang diperbarui. Proses ini mahal secara komputasi dan dapat menurunkan performa aplikasi jika ditangani dengan tidak tepat. Di sinilah useCallback() berguna.

Dengan useCallback(), pengguna dapat memoise sebuah fungsi, artinya hanya didefinisikan ulang ketika dependensinya berubah. Ini mencegah rendering ulang komponen yang tidak perlu, sehingga mengoptimalkan kinerja aplikasi.

Berikut adalah contoh –

const memoizedCallback = useCallback(

() => {

melakukan Sesuatu(a, b);

},

[a,b],

);

Meskipun memulai dengan React melalui tutorial adalah cara yang bagus, mengikuti kursus dinamis untuk memulai pengembangan dapat secara signifikan membantu Anda memperbarui keterampilan Anda. Lihatlah Program Pascasarjana Eksekutif dalam Pengembangan Perangkat Lunak – Kursus Spesialisasi dalam Pengembangan Stack Penuh dari upGrad hingga kickstart!

Keuntungan menggunakan useCallBack()

Berikut adalah beberapa keuntungan menggunakan React useCallBack() –

• useCallback() dapat membantu aplikasi React berjalan lebih cepat dengan mencegah pembaruan komponen yang tidak perlu.
• Jika sebuah komponen mengambil banyak data dan menampilkannya sebagai grafik, ia bisa mendapatkan keuntungan dari useCallback().
• Jika komponen induk grafik diperbarui, tetapi perubahan tersebut tidak memengaruhi grafik, tidak perlu memperbaruinya dan mengambil data lagi.
• Menggunakan useCallback() untuk memoise fungsi mengambil data, kita dapat menghindari pembaruan yang tidak perlu dan membuat aplikasi lebih cepat dan lancar.
• Pengoptimalan ini dapat meningkatkan pengalaman pengguna, karena aplikasi akan bekerja lebih cepat dan efisien.

LihatKursus Pengembangan Perangkat Lunak upGrad untuk meningkatkan keterampilan Anda.

Sintaks dan Parameter useCallBack()

const memoizedCallback = useCallback(

() => {

lakukan sesuatu();

},

[ketergantungan1, ketergantungan2]

);

Dalam contoh, hook useCallback() memoise fungsi doSomething(), yang berarti ia meng-cache versi yang dibuat sebelumnya. Fungsi yang di-cache hanya akan digunakan pada perenderan berikutnya kecuali jika nilaidependensi1 atau dependensi2berubah.

Jika salah satu dari dependensi ini berubah, versi baru dari fungsidoSomething() akan dibuat, dan versi yang di-cache akan diganti dengan yang baru.Ini membantu mengoptimalkan kinerja aplikasi dengan mencegah pembuatan fungsi dan rendering ulang yang tidak perlu.

Perbedaan antara useMemo() dan useCallBack()

useCallback dan useMemo adalah React Hooks yang dapat meningkatkan kinerja aplikasi React dengan memoising nilai. Kedua hook mengambil fungsi sebagai argumen dan mengembalikan versi memo dari fungsi tersebut.

Inilah perbedaan antara keduanya:

Skenario kapan menggunakan useCallBack()

Berikut adalah skenario kapan useCallBack() dapat digunakan –

Pengoptimalan Komponen Anak

useCallback React mengoptimalkan komponen anak yang mengandalkan kesetaraan referensi untuk menghindari render yang tidak perlu, terutama saat meneruskan callback ke komponen anak ini.

Mencegah Render yang Tidak Perlu

React useCallback sangat berguna ketika Anda memiliki komponen dengan elemen turunan yang berulang kali dirender tanpa memerlukannya. Anda bisa melewatkan fungsi callback dan larik dependensi ke useCallback untuk mencegah perenderan yang tidak perlu.

Gunakan kesempatan Anda untuk memahami fungsi useCallBack() secara mendetail dengan bantuan kursus Bootcamp Pengembangan Perangkat Lunak Full Stack dari upGrad.

Jelajahi Kursus Rekayasa Perangkat Lunak Populer kami

Contoh penggunaanCallBack()

Berikut adalah beberapa contoh cara mengimplementasikan hook useCallBack().

useCallBack Contoh 1

Saat komponen induk menurunkan fungsi sebagai penyangga ke komponen anak, rendering ulang induk yang sering dapat menyebabkan komponen anak merender ulang yang tidak perlu. Dalam kasus seperti itu, gunakan useCallback untuk membuat memo fungsi yang dapat membantu mencegah perenderan ulang yang tidak perlu ini.

import React, { useCallback } from 'react';

function ParentComponent() {

const handleButtonClick = useCallback(() => {

console.log('Tombol diklik');

}, []);

kembali (

<ChildComponent onClick={handleButtonClick} />

);

}

function ChildComponent({ onClick }) {

kembali (

<button onClick={onClick}>Klik saya</button>

);

}

gunakanCallBack Contoh 2

Misalkan Anda memiliki fungsi yang melakukan komputasi kompleks pada kumpulan data besar. Jika fungsi ini sering dipanggil dan memerlukan waktu lama untuk dijalankan, ini dapat menyebabkan masalah kinerja pada aplikasi Anda. Dalam skenario ini, Anda dapat menggunakan useCallback untuk memoise fungsi dan mencegah eksekusi ulang komputasi yang tidak perlu.

import React, { useState, useCallback } dari 'react';

function ParentComponent() {

const [data, setData] = useState([]);

const processData = useCallback(() => {

const data yang diproses = “Data yang diproses”;

mengembalikan Data yang diproses;

}, [data]);

kembali (

<ChildComponent processData={processData} />

);

}

function ChildComponent({ processData }) {

hasil const = prosesData();

kembali (

<div>{hasil}</div>

);

}

Bereaksi Optimasi Kinerja menggunakan useCallBack()

Kait useCallback adalah alat yang ampuh di React yang memungkinkan Anda memoise suatu fungsi, memastikan itu hanya dibuat ulang ketika salah satu dependensinya diubah. Ini sangat bermanfaat untuk fungsi intensif kinerja yang sering dipanggil. Lihat contoh di bawah ini untuk melihat bagaimana itu dapat digunakan -

impor { useState, useEffect } dari 'bereaksi';

fungsi Aplikasi() {

const [kata, setWord] = useState(“Bob”);

const say = () => console.log(`Kata Anda adalah: ${kata}`);

useEffect(() => {

mengatakan();

}, [mengatakan]);

kembali <div>Selamat datang!</div>;

}

Contoh ini menunjukkan bahwa hook useEffect bergantung pada fungsi say, yang berarti ia hanya boleh dipicu dengan perubahan fungsi. Namun, karena pemeriksaan kesetaraan referensial React, katakanlah fungsi akan selalu dievaluasi sebagai benar, bahkan dalam contoh tidak ada perubahan aktual, yang mengakibatkan perenderan yang tidak perlu.

Callback useEffect akan digunakan pada setiap render, yang tidak cocok untuk performa. Salah satu cara untuk mengatasi ini adalah dengan memindahkan fungsi ke blok useEffect, tetapi ini bukan solusi yang ideal karena Anda tidak akan dapat menggunakan fungsi tersebut di tempat lain. Lihat contoh di bawah ini -

import React, { useState, useEffect } dari 'react';

fungsi Aplikasi() {

const [kata, setWord] = useState(“Bob”);

const say = () => console.log(`Kata Anda adalah: ${kata}`);

useEffect(() => {

mengatakan();

}, [mengatakan]);

kembali <div>Selamat datang!</div>;

}

Solusi lain adalah mengimplementasikan hook useCallback dengan membungkus fungsi. Sangat penting untuk mengingat bahwa fungsi useCallback memerlukan larik ketergantungan seperti halnya useEffect. Jika fungsi mengambil variabel apa pun, pengguna dapat meneruskannya dengan larik; atau biarkan kosong. Di sini, karena fungsi say bergantung pada variabel kata, kami memasukkannya ke dalam array.

impor {useState, useEffect,useCallback} dari 'react'

Aplikasi fungsi(){

const [kata,setWord]=useState(“Bob”)

const say = useCallback(()=>console.log(`Kata Anda adalah: ${kata}`),[kata])

useEffect(()=>{

mengatakan()

},[mengatakan])

kembali <div>Selamat datang!</div>

}

Kapan tidak menggunakan useCallBack()

Meskipun useCallback() adalah alat yang berguna untuk mengoptimalkan kinerja dalam skenario tertentu, ada kalanya hal itu tidak diperlukan atau bahkan merugikan. Berikut adalah beberapa contoh kapan tidak menggunakan useCallback():

• Ketika fungsi diteruskan sebagai penyangga sudah merupakan fungsi murni yang tidak bergantung pada keadaan eksternal.
• Saat fungsi dilewatkan sebagai penyangga, itu tidak menyebabkan masalah kinerja apa pun dan tidak dipanggil secara berlebihan.
• Saat fungsi diteruskan sebagai penyangga, fungsi ini digunakan di banyak tempat dan perlu dibuat ulang setiap saat untuk mencerminkan perilaku atau ketergantungan yang berbeda.
• Ketika fungsi diteruskan sebagai penyangga adalah bagian dari pohon komponen kecil, perolehan kinerja dari useCallback() akan diabaikan.
• Saat fungsi dilewatkan sebagai prop digunakan sebagai event handler dan hanya dipanggil sekali.

Dalam kasus ini, menggunakan useCallback() sebenarnya dapat menurunkan kinerja karena biaya pembuatan dan pemeliharaan panggilan balik memo. Penting untuk mempertimbangkan setiap kasus penggunaan dengan hati-hati dan menimbang potensi manfaat terhadap potensi biaya sebelum memutuskan apakah akan menggunakan useCallback() atau tidak.

Keterampilan Pengembangan Perangkat Lunak Dalam Permintaan

Kesimpulan

Menggunakan useCallback bisa menjadi alat yang ampuh untuk mengoptimalkan kinerja aplikasi React Anda. Dengan menghafal fungsi, rendering ulang yang tidak perlu dapat dihindari, sehingga menghasilkan pengalaman pengguna yang lebih halus dan lebih efisien. Namun, penting untuk menggunakan useCallback dengan bijaksana dan memahami skenario saat paling efektif.

upGrad menawarkan program Master of Science dalam Ilmu Komputer yang memberikan pendidikan ilmu komputer komprehensif yang berfokus pada keterampilan yang relevan dengan industri. Program ini untuk individu yang lebih baru atau lebih berpengalaman untuk meningkatkan keterampilan pengembangan perangkat lunak mereka. Dengan kursus ini, siswa akan lebih dari siap untuk meningkatkan karir mereka di dunia nyata dan menjadi ahli di bidang yang dicita-citakan.