React useCallback hooki

useCallback hooki callback funksiyasini eslab qolish (memoizatsiya qilish) uchun ishlatiladi.

Funksiyani eslab qolish funksiya natijasini keshlash demakdir, shuning uchun uni qayta hisoblash kerak emas.

useCallback funksiyasi faqat bog‘liqliklaridan biri qiymatni o‘zgartirganda qayta ishlaydi.

Bu bizga resurs talab qiladigan funksiyalarni har bir renderda avtomatik ravishda ishlamasligi uchun ajratish imkonini beradi.

Sintaksis

The useCallback Hook accepts two arguments.

useCallback(callback, dependencies)

callback : Yodda saqlamoqchi bo‘lgan funksiya.

dependencies : Callback funksiyasi uchun bog‘liqliklar majmuasi. Memoizatsiya qilingan (keshlangan) callback faqat ushbu bog‘liqliklardan biri o‘zgargan taqdirdagina o‘zgaradi.

//Without useCallback:
import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

// Child component that receives a function prop
const Button = React.memo(({ onClick, text }) => {
  alert(`Child ${text} button rendered`);
  return <button onClick={onClick}>{text}</button>;
});

// Parent component without useCallback
function WithoutCallbackExample() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // This function is recreated on every render
  const handleClick1 = () => {
    setCount1(count1 + 1);
  };

  const handleClick2 = () => {
    setCount2(count2 + 1);
  };

  alert("Parent rendered");
  return (
    <div>
      <h2>Without useCallback:</h2>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <Button onClick={handleClick1} text="Button 1" />
      <Button onClick={handleClick2} text="Button 2" />
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <WithoutCallbackExample />
);  

Yuqoridagi misolni ishga tushirib ko‘ring va tugmalarni bosing.

Tugmalarni har safar bosganingizda uchala komponent (Parent, Button 1 va Button 2) qayta render qilinishini sezasiz.

Buni useCallback hooki yordamida oldini olish mumkin.

useCallback hookidan foydalanib, biz funksiyalarni eslab qolishimiz va faqat ularning bog‘liqliklari o‘zgarganda ularni qayta yaratishimiz mumkin.

1-tugmani bosganda, faqat Parent va 1-tugma qayta render (re-render) bo‘ladi, 2-tugma bosilganda esa faqat Parent va 2-tugma qayta render bo‘ladi:

//With useCallback:
import React, { useState, useCallback } from 'react';
import { createRoot } from 'react-dom/client';

// Child component that receives a function prop
const Button = React.memo(({ onClick, text }) => {
  console.log(`${text} button rendered`);
  return <button onClick={onClick}>{text}</button>;
});

// Parent component with useCallback
function WithCallbackExample() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  // These functions are memoized and only recreated when dependencies change
  const handleClick1 = useCallback(() => {
    setCount1(count1 + 1);
  }, [count1]);

  const handleClick2 = useCallback(() => {
    setCount2(count2 + 1);
  }, [count2]);

  console.log("Parent rendered");
  return (
    <div>
      <h2>With useCallback:</h2>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <Button onClick={handleClick1} text="Button 1" />
      <Button onClick={handleClick2} text="Button 2" />
    </div>
  );
}

createRoot(document.getElementById('root')).render(
  <WithCallbackExample />
);