ری ایکٹ ہکس: دی ڈیپ کٹس

ہکس دوبارہ قابل استعمال افعال ہیں۔ وہ آپ کو استعمال کرنے کی اجازت دیتے ہیں۔ تھے اور دوسری خصوصیات (مثلاً لائف سائیکل کے طریقے وغیرہ) بغیر کلاس لکھے۔ ہک فنکشنز ہمیں "ہک ان" کرنے دیتے ہیں۔ ریاستی لائف سائیکل پر رد عمل ظاہر کریں۔ فنکشنل اجزاء کا استعمال کرتے ہوئے، ہمیں اپنے فنکشنل اجزاء کی حالت کو کلاس کے اجزاء میں تبدیل کرنے کی ضرورت کے بغیر ہیرا پھیری کرنے کی اجازت دیتا ہے۔

جواب دیں ہکس متعارف کرایا ورژن 16.8 میں واپس آیا اور تب سے مزید اضافہ کر رہا ہے۔ کچھ دوسروں کے مقابلے میں زیادہ استعمال شدہ اور مقبول ہیں، جیسے useEffect, useState، اور useContext ہکس مجھے کوئی شک نہیں ہے کہ اگر آپ React کے ساتھ کام کرتے ہیں تو آپ ان تک پہنچ گئے ہیں۔

لیکن جس چیز میں مجھے دلچسپی ہے وہ کم معروف React ہکس ہیں۔ جب کہ تمام React ہکس اپنے اپنے طریقے سے دلچسپ ہیں، ان میں سے پانچ ایسے ہیں جو میں واقعتا آپ کو دکھانا چاہتا ہوں کیونکہ وہ آپ کے روزمرہ کے کام میں پاپ اپ نہیں ہوسکتے ہیں — یا ہوسکتا ہے کہ وہ کرتے ہوں اور ان کو جان کر آپ کو کچھ اضافی سپر پاور مل جاتی ہے۔

useReducer

۔ useReducer ہک دوسرے ہکس کی طرح ایک ریاستی انتظام کا آلہ ہے۔ خاص طور پر، یہ ایک متبادل ہے useState کانٹا.

اگر آپ استعمال کرتے ہیں۔ useReducer دو یا زیادہ ریاستوں (یا اعمال) کو تبدیل کرنے کے لیے ہک، آپ کو ان ریاستوں کو انفرادی طور پر جوڑ توڑ کرنے کی ضرورت نہیں ہوگی۔ ہک تمام ریاستوں پر نظر رکھتا ہے اور اجتماعی طور پر ان کا انتظام کرتا ہے۔ دوسرے لفظوں میں: یہ ریاست کی تبدیلیوں کا انتظام اور ری رینڈر کرتا ہے۔ کے برعکس useState کانٹا، useReducer جب پیچیدہ منصوبوں میں بہت سی ریاستوں کو سنبھالنے کی بات آتی ہے تو آسان ہے۔

استعمال کے مقدمات

useReducer متعدد ریاستوں کے ساتھ کام کرنے کی پیچیدگی کو کم کرنے میں مدد مل سکتی ہے۔ اس کا استعمال اس وقت کریں جب آپ خود کو متعدد ریاستوں کو اجتماعی طور پر ٹریک کرنے کی ضرورت محسوس کریں، کیونکہ یہ آپ کو ریاستی انتظام اور کسی جزو کی رینڈرنگ منطق کو الگ الگ خدشات کے طور پر علاج کرنے کی اجازت دیتا ہے۔

نحو

useReducer تین دلائل کو قبول کرتا ہے، جن میں سے ایک اختیاری ہے:

• ایک ریڈوسر فنکشن
• initialState
• an init فنکشن (اختیاری)

const [state, dispatch] = useReducer(reducer, initialState)
const [state, dispatch] = useReducer(reducer, initialState initFunction) // in the case where you initialize with the optional 3rd argument

مثال کے طور پر

درج ذیل مثال ایک انٹرفیس ہے جس میں ٹیکسٹ ان پٹ، کاؤنٹر اور بٹن شامل ہیں۔ ہر عنصر کے ساتھ تعامل ریاست کو اپ ڈیٹ کرتا ہے۔ نوٹس کیسے کریں useReducer ہمیں انفرادی طور پر ترتیب دینے کے بجائے ایک ساتھ متعدد کیسز کی وضاحت کرنے کی اجازت دیتا ہے۔

import { useReducer } from 'react';
const reducer = (state, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    case 'USER_INPUT':
      return { ...state, userInput: action.payload };
    case 'TOGGLE_COLOR':
      return { ...state, color: !state.color };
    default:
      throw new Error();
  }
}

function App() {
  const [state, dispatch] = useReducer(reducer, { count: 0, userInput: '', color: false })

  return (
    <main className="App, App-header" style={{ color: state.color ? '#000' : '#FF07FF'}}>
      <input style={{margin: '2rem'}}
        type="text"
        value={state.userInput}
        onChange={(e) => dispatch({ type: 'USER_INPUT', payload: e.target.value })}
      />
      <br /><br />
      <p style={{margin: '2rem'}} >{state.count}</p>
      <section style={{margin: '2rem'}}>
        <button  onClick={(() => dispatch({ type: 'DECREMENT' }))}>-</button>
        <button onClick={(() => dispatch({ type: 'INCREMENT' }))}>+</button>
        <button onClick={(() => dispatch({ type: 'TOGGLE_COLOR' }))}>Color</button>
      </section>
      <br /><br />
      <p style={{margin: '2rem'}}>{state.userInput}</p>
    </main>
  );
}
export default App;

مندرجہ بالا کوڈ سے، دیکھا کہ ہم کس طرح آسانی سے کئی ریاستوں کو منظم کرنے کے قابل ہیں۔ کم کرنے والا (سوئچ کیس)، یہ اس کا فائدہ ظاہر کرتا ہے۔ useReducer. یہ وہ طاقت ہے جب یہ متعدد ریاستوں کے ساتھ پیچیدہ ایپلی کیشنز میں کام کرتے وقت دیتی ہے۔

useRef

۔ useRef ہک کا استعمال DOM تک رسائی کے لیے عناصر پر refs بنانے کے لیے کیا جاتا ہے۔ لیکن اس سے زیادہ، یہ a کے ساتھ کسی چیز کو لوٹاتا ہے۔ .current ایسی پراپرٹی جو کسی جزو کے پورے لائف سائیکل میں استعمال کی جا سکتی ہے، جس سے ڈیٹا کو دوبارہ رینڈر کیے بغیر برقرار رہتا ہے۔ تو، useRef رینڈرز کے درمیان قدر یکساں رہتی ہے۔ حوالہ کو اپ ڈیٹ کرنے سے دوبارہ رینڈر کو متحرک نہیں کیا جاتا ہے۔

استعمال کے مقدمات

تک پہنچیں useRef ہک جب آپ چاہیں:

• ذخیرہ شدہ تغیر پذیر معلومات کے ساتھ DOM کو جوڑیں۔
• بچوں کے اجزاء (گھوںسلا عناصر) سے معلومات تک رسائی حاصل کریں۔
• ایک عنصر پر توجہ مرکوز کریں.

یہ سب سے زیادہ مفید ہے جب آپ کی ایپ میں تبدیل ہونے والا ڈیٹا دوبارہ رینڈر کیے بغیر اسٹور کریں۔

نحو

useRef صرف ایک دلیل کو قبول کرتا ہے، جو کہ ہے۔ ابتدائی قیمت.

const newRefComponent = useRef(initialValue);

مثال کے طور پر

یہاں میں نے استعمال کیا۔ useRef اور useState ٹیکسٹ ان پٹ میں ٹائپ کرتے وقت ایک ایپلی کیشن کتنی بار اپڈیٹ شدہ حالت پیش کرتی ہے یہ دکھانے کے لیے ہک۔

import './App.css'

function App() {
  const [anyInput, setAnyInput] = useState(" ");
  const showRender = useRef(0);
  const randomInput = useRef();
  const toggleChange = (e) => {
    setAnyInput (e.target.value);
    showRender.current++;
  
  }
  const focusRandomInput = () => {
    randomInput.current.focus();
  }

  return (
    <div className="App">
      <input className="TextBox" 
        ref ={randomInput} type="text" value={anyInput} onChange={toggleChange}
      />
      <h3>Amount Of Renders: {showRender.current}</h3>
      <button onClick={focusRandomInput}>Click To Focus On Input </button>
    </div>
  );
}

export default App;

نوٹ کریں کہ ٹیکسٹ فیلڈ میں ہر کریکٹر کو کیسے ٹائپ کرنا ایپ کی حالت کو اپ ڈیٹ کرتا ہے، لیکن کبھی بھی مکمل ری رینڈر کو متحرک نہیں کرتا ہے۔

useImperativeHandle

آپ جانتے ہیں کہ ایک بچے کے جزو کو والدین کے جزو سے ان کے پاس بھیجے گئے کال فنکشنز تک کیسے رسائی ہوتی ہے؟ والدین ان کو پرپس کے ذریعے نیچے منتقل کرتے ہیں، لیکن یہ منتقلی "غیر سمتی" ہے اس لحاظ سے کہ والدین کسی ایسے فنکشن کو کال کرنے سے قاصر ہیں جو بچے میں ہے۔

ٹھیک ہے، useImperativeHandle والدین کے لیے بچے کے اجزاء کے افعال تک رسائی ممکن بناتا ہے۔

یہ کیسے کام کرتا ہے؟

• بچے کے جزو میں ایک فنکشن کی وضاحت کی گئی ہے۔
• A ref والدین میں شامل کیا جاتا ہے۔
• ہم استعمال کرتے ہیں forwardRef، کی اجازت دیتا ہے ref جو بچے کو منتقل کرنے کی تعریف کی گئی تھی۔
• useImperativeHandle کے ذریعے بچے کے افعال کو بے نقاب کرتا ہے۔ ref.

استعمال کے مقدمات

useImperativeHandle اچھا کام کرتا ہے جب آپ چاہتے ہیں کہ والدین کا کوئی حصہ بچے میں ہونے والی تبدیلیوں سے متاثر ہو۔ لہٰذا، تبدیل شدہ فوکس، بڑھتے اور گھٹتے، اور دھندلے عناصر جیسی چیزیں ایسی صورت حال ہو سکتی ہیں جہاں آپ خود کو اس ہک تک پہنچتے ہوئے پائیں تاکہ والدین کو اس کے مطابق اپ ڈیٹ کیا جا سکے۔

نحو

useImperativeHandle (ref, createHandle, [dependencies])

مثال کے طور پر

اس مثال میں، ہمارے پاس دو بٹن ہیں، ایک جو والدین کے جزو میں ہے اور دوسرا جو بچے میں ہے۔ والدین کے بٹن پر کلک کرنے سے بچے سے ڈیٹا حاصل ہو جاتا ہے، جس سے ہمیں والدین کے حصے میں ہیرا پھیری کرنے کی اجازت ملتی ہے۔ یہ اس لیے ترتیب دیا گیا ہے کہ چائلڈ بٹن پر کلک کرنے سے والدین کے جزو سے بچے کو کچھ بھی نہیں جاتا ہے تاکہ یہ واضح ہو سکے کہ ہم چیزوں کو کس طرح مخالف سمت میں منتقل کر رہے ہیں۔

// Parent component
import React, { useRef } from "react";
import ChildComponent from "./childComponent";
import './App.css';

function useImperativeHandle() {
  const controlRef = useRef(null);
  return (
    onClick={
      () => {
        controlRef.current.controlPrint();
      }
    }
    >
    Parent Box
  );
}
export default useImperativeHandle;

// Child component
import React, { forwardRef, useImperativeHandle, useState } from "react";

const ChildComponent = forwardRef((props, ref) => {
  const [print, setPrint] = useState(false);
  useImperativeHandle(ref, () => ({
    controlPrint() 
    { setPrint(!print); },
  })
  );

  return (
    <>
    Child Box
    { print && I am from the child component }
  );
});

export default ChildComponent;

آؤٹ پٹ

useMemo

useMemo سب سے کم استعمال ہونے والے لیکن سب سے زیادہ دلچسپ React ہکس میں سے ایک ہے۔ یہ کارکردگی کو بہتر بنا سکتا ہے اور تاخیر کو کم کر سکتا ہے، خاص طور پر آپ کی ایپ میں بڑے حسابات پر۔ وہ کیسے؟ ہر بار جب کسی جزو کی حالت اپ ڈیٹ ہوتی ہے اور اجزاء دوبارہ پیش کرتے ہیں، useMemo ہک رد عمل کو قدروں کی دوبارہ گنتی کرنے سے روکتا ہے۔

آپ دیکھتے ہیں، افعال ریاستی تبدیلیوں کا جواب دیتے ہیں۔ دی useMemo ہک ایک فنکشن لیتا ہے اور اس فنکشن کی واپسی کی قیمت لوٹاتا ہے۔. یہ اس قدر کو ذخیرہ کرتا ہے تاکہ اسے دوبارہ پیش کرنے میں اضافی کوششوں کو خرچ کرنے سے روکا جا سکے، پھر جب انحصار میں سے کوئی ایک تبدیل ہو جائے تو اسے واپس کر دیتا ہے۔

اس عمل کو کہا جاتا ہے یادداشت اور یہ وہی ہے جو پچھلی درخواست کی قدر کو یاد کرکے کارکردگی کو بڑھانے میں مدد کرتا ہے تاکہ اس تمام ریاضی کو دہرائے بغیر اسے دوبارہ استعمال کیا جاسکے۔

استعمال کے مقدمات

بہترین استعمال کے معاملات کسی بھی وقت ہونے جا رہے ہیں جب آپ بھاری حسابات کے ساتھ کام کر رہے ہیں جہاں آپ قیمت کو ذخیرہ کرنا چاہتے ہیں اور اسے بعد میں ہونے والی حالت میں ہونے والی تبدیلیوں پر استعمال کرنا چاہتے ہیں۔ یہ ایک اچھی کارکردگی کی جیت ہو سکتی ہے، لیکن اسے بہت زیادہ استعمال کرنے سے آپ کی ایپ کی میموری کو کھوکھلا کر کے بالکل الٹا اثر ہو سکتا ہے۔

نحو

useMemo( () => 
  { // Code goes here },
  []
)

مثال کے طور پر

بٹن پر کلک کرتے وقت، یہ منی پروگرام اس بات کی نشاندہی کرتا ہے کہ جب کوئی عدد مساوی یا طاق ہے، پھر قدر کو مربع کرتا ہے۔ میں نے اس کی کمپیوٹیشن پاور کو بڑھانے کے لیے لوپ میں بہت سے زیرو شامل کیے ہیں۔ یہ گرے ہوئے سیکنڈوں میں قدر واپس کرتا ہے اور اب بھی کی وجہ سے اچھی طرح کام کرتا ہے۔ useMemo کانٹا.

// UseMemo.js
import React, { useState, useMemo } from 'react'

function Memo() {
  const [memoOne, setMemoOne] = useState(0);
  const incrementMemoOne = () => { setMemoOne(memoOne + 1) }
  const isEven = useMemo(() => { 
    let i = 0 while (i < 2000000000) i++ return memoOne % 2 === 0
  },
  [memoOne]);
  
  const square = useMemo(()=> { 
    console.log("squared the number"); for(var i=0; i < 200000000; i++);
    return memoOne * memoOne;
  },
  [memoOne]);

  return (
    Memo One - 
    { memoOne }
    { isEven ? 'Even' : 'Odd' } { square } 
  );
}
export default Memo

آؤٹ پٹ

useMemo کی طرح تھوڑا ہے useCallback ہک، لیکن فرق یہ ہے useMemo ایک فنکشن سے ایک حفظ شدہ قیمت کو ذخیرہ کر سکتا ہے، جہاں useCallback حفظ شدہ فنکشن کو خود ہی محفوظ کرتا ہے۔

useCallback

۔ useCallback ہک ایک اور دلچسپ ہے اور آخری سیکشن اس کے لیے ایک بگاڑنے والا الرٹ تھا۔

جیسا کہ ہم نے ابھی دیکھا، useCallback کی طرح کام کرتا ہے useMemo ہک اس میں کہ وہ دونوں بعد میں استعمال کے لیے کسی چیز کو کیش کرنے کے لیے میموائزیشن کا استعمال کرتے ہیں۔ جبکہ useMemo فنکشن کے حساب کتاب کو کیشڈ ویلیو کے طور پر اسٹور کرتا ہے، useCallback ایک فنکشن کو اسٹور اور واپس کرتا ہے۔

استعمال کے مقدمات

پسند useMemo, useCallback ایک عمدہ کارکردگی کی اصلاح ہے جس میں یہ ایک میموائزڈ کال بیک اور اس کے کسی بھی انحصار کو دوبارہ رینڈر کیے بغیر اسٹور اور واپس کرتا ہے۔

نحو

const getMemoizedCallback = useCallback (
  () => { doSomething () }, []
);

مثال کے طور پر

{ useCallback, useState } from "react";
import CallbackChild from "./UseCallback-Child";
import "./App.css"

export default function App() {
  const [toggle, setToggle] = useState(false);
  const [data, setData] = useState("I am a data that would not change at every render, thanks to the useCallback");
  const returnFunction = useCallback(
    (name) => 
    { return data + name; }, [data]
  );
  return (
    onClick={() => {
      setToggle(!toggle);
    }}
    >
    {" "}

    // Click To Toggle
    { toggle && h1. Toggling me no longer affects any function } 
  ); 
}

// The Child component
import React, { useEffect } from "react";

function CallbackChild(
  { returnFunction }
) {
  useEffect(() => 
    { console.log("FUNCTION WAS CALLED"); },
    [returnFunction]);
  return { returnFunction(" Hook!") };
}
export default CallbackChild;

آؤٹ پٹ

فائنل خیالات

وہاں ہم جاتے ہیں! ہم نے ابھی پانچ سپر ہینڈی ری ایکٹ ہکس کو دیکھا جو میرے خیال میں اکثر نظر انداز ہو جاتے ہیں۔ جیسا کہ اس طرح کے بہت سے راؤنڈ اپ کے ساتھ، ہم صرف ان ہکس کی سطح کو کھرچ رہے ہیں۔ جب آپ انہیں استعمال کرتے ہیں تو ان میں سے ہر ایک کی اپنی باریکیاں اور غور و فکر ہوتے ہیں۔ لیکن امید ہے کہ آپ کو اس بارے میں ایک اچھا اعلیٰ سطحی اندازہ ہوگا کہ وہ کیا ہیں اور جب وہ کسی دوسرے ہک سے بہتر فٹ ہوسکتے ہیں تو آپ زیادہ کثرت سے پہنچ سکتے ہیں۔

ان کو مکمل طور پر سمجھنے کا بہترین طریقہ مشق ہے۔ لہذا میں آپ کو بہتر سمجھنے کے لیے اپنی درخواست میں ان ہکس کے استعمال کی مشق کرنے کی ترغیب دیتا ہوں۔ اس کے لیے، آپ درج ذیل وسائل کو چیک کرکے مزید گہرائی حاصل کرسکتے ہیں۔