প্রতিক্রিয়া হুকগুলিতে কীভাবে `সেটস্টেট` কলব্যাক ব্যবহার করবেন

Question 1

প্রতিক্রিয়া হুক useStateউপাদান উপাদান সেট করার জন্য পরিচয় করিয়ে দেয় । তবে নীচের কোডের মতো কলব্যাক প্রতিস্থাপন করতে আমি কীভাবে হুক ব্যবহার করতে পারি:

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

রাষ্ট্র আপডেট হওয়ার পরে আমি কিছু করতে চাই।

আমি জানি আমি useEffectঅতিরিক্ত জিনিসগুলি করতে ব্যবহার করতে পারি তবে আমাকে রাষ্ট্রের পূর্বের মানটি পরীক্ষা করতে হবে যার জন্য কিছুটা কোড দরকার requires আমি একটি সহজ সমাধান খুঁজছি যা useStateহুকের সাহায্যে ব্যবহার করা যেতে পারে ।

Question 2

useEffectএটি অর্জনের জন্য আপনার হুক ব্যবহার করা দরকার ।

const [counter, setCounter] = useState(0);

const doSomething = () => {
  setCounter(123);
}

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

Question 3

আপনি যদি পূর্বের অবস্থাটি আপডেট করতে চান তবে আপনি এইভাবে হুক্সে করতে পারেন:

const [count, setCount] = useState(0);


setCount(previousCount => previousCount + 1);

Question 4

আমার মনে হয়, ব্যবহার `useEffect`করা কোনও স্বজ্ঞাত উপায় নয়।

আমি এটির জন্য একটি মোড়ক তৈরি করেছি। এই কাস্টম হুকটিতে আপনি নিজের কলব্যাকটি setStateপ্যারামিটারের পরিবর্তে প্যারামিটারে স্থানান্তর করতে পারেন useState।

আমি সবেমাত্র টাইপস্ক্রিপ্ট সংস্করণ তৈরি করেছি। সুতরাং আপনার যদি জাভাস্ক্রিপ্টে এটি ব্যবহার করার প্রয়োজন হয়, কেবল কোড থেকে কিছু প্রকারের স্বরলিপি সরিয়ে ফেলুন।

ব্যবহার

const [state, setState] = useStateCallback(1);
setState(2, (n) => {
  console.log(n) // 2
});

ঘোষণা

import { SetStateAction, useCallback, useEffect, useRef, useState } from 'react';

type Callback<T> = (value?: T) => void;
type DispatchWithCallback<T> = (value: T, callback?: Callback<T>) => void;

function useStateCallback<T>(initialState: T | (() => T)): [T, DispatchWithCallback<SetStateAction<T>>] {
  const [state, _setState] = useState(initialState);

  const callbackRef = useRef<Callback<T>>();
  const isFirstCallbackCall = useRef<boolean>(true);

  const setState = useCallback((setStateAction: SetStateAction<T>, callback?: Callback<T>): void => {
    callbackRef.current = callback;
    _setState(setStateAction);
  }, []);

  useEffect(() => {
    if (isFirstCallbackCall.current) {
      isFirstCallbackCall.current = false;
      return;
    }
    callbackRef.current?.(state);
  }, [state]);

  return [state, setState];
}

export default useStateCallback;

খসড়া

যদি পাস করা তীর ফাংশনটি একটি পরিবর্তনশীল বাহ্যিক ফাংশন উল্লেখ করে, তবে এটি রাষ্ট্র আপডেট হওয়ার পরে বর্তমান মান একটি মান নয় capture উপরের ব্যবহারের উদাহরণে, কনসোল.লগ (রাজ্য) 1 টি না 2 টি মুদ্রণ করবে।

Question 5

useEffect, এটি শুধুমাত্র রাষ্ট্রীয় আপডেটগুলিতে আগুন জ্বালিয়ে দেয় :

const [state, setState] = useState({ name: "Michael" })
const isFirstRender = useRef(true)

useEffect(() => {
  if (!isFirstRender.current) {
    console.log(state) // do something after state has updated
  }
}, [state])

useEffect(() => { 
  isFirstRender.current = false // toggle flag after first render/mounting
}, [])

উপরের কলব্যাকটি নকল করবে setStateসেরা এবং প্রাথমিক অবস্থায় আগুন নয় । আপনি এটি থেকে একটি কাস্টম হুক নিষ্কাশন করতে পারেন:

function useEffectUpdate(effect, deps) {
  const isFirstRender = useRef(true) 

  useEffect(() => {
    if (!isFirstRender.current) {
      effect()
    }  
  }, deps) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    isFirstRender.current = false;
  }, []);
}

// ... Usage inside component
useEffectUpdate(() => { console.log(state) }, [state])

Question 6

আপনার প্রশ্নটি খুব বৈধ me আমাকে আপনাকে বলতে দিন যে ইউজএফেক্ট একবার ডিফল্টরূপে চালানো হয় এবং প্রতিবারের পরে নির্ভরতা অ্যারে পরিবর্তিত হয়।

নীচের উদাহরণটি পরীক্ষা করুন ::

import React,{ useEffect, useState } from "react";

const App = () => {
  const [age, setAge] = useState(0);
  const [ageFlag, setAgeFlag] = useState(false);

  const updateAge = ()=>{
    setAgeFlag(false);
    setAge(age+1);
    setAgeFlag(true);
  };

  useEffect(() => {
    if(!ageFlag){
      console.log('effect called without change - by default');
    }
    else{
      console.log('effect called with change ');
    }
  }, [ageFlag,age]);

  return (
    <form>
      <h2>hooks demo effect.....</h2>
      {age}
      <button onClick={updateAge}>Text</button>
    </form>
  );
}

export default App;

আপনি যদি সেটাকে স্ট্যান্ড কলব্যাকটি হুকের সাথে সম্পাদন করতে চান তবে ফ্ল্যাগ ভেরিয়েবলটি ব্যবহার করুন এবং যদি ইউএফএসইএলএস বা আইএফ ব্লক ইউজএফেক্টের অভ্যন্তরে দিন যাতে যখন শর্তগুলি সন্তুষ্ট হয় তবে কেবলমাত্র সেই কোড ব্লকটি কার্যকর করে। যে কোনও সময় প্রভাব নির্ভরশীল অ্যারে পরিবর্তনের হিসাবে চলে তবে আইফোন কোডটি কেবলমাত্র সেই নির্দিষ্ট শর্তে কার্যকর হবে।

Question 7

setState() উপাদানগুলির স্থিতিতে পরিবর্তনগুলি চিহ্নিত করে এবং প্রতিক্রিয়া জানায় যে এই উপাদানটি এবং তার শিশুদের আপডেট হওয়া অবস্থায় পুনরায় রেন্ডার করা দরকার।

সেটস্টেট পদ্ধতিটি অ্যাসিনক্রোনাস এবং বাস্তবে এটি কোনও প্রতিশ্রুতি দেয় না। সুতরাং যে ক্ষেত্রে আমরা কোনও ফাংশন আপডেট করতে বা কল করতে চাই সেখানে ফাংশনটিকে দ্বিতীয় যুক্তি হিসাবে সেটস্টেট ফাংশনে কলব্যাক বলা যেতে পারে। উদাহরণস্বরূপ, উপরের আপনার ক্ষেত্রে আপনি একটি ফাংশনকে সেটস্টেট কলব্যাক হিসাবে ডেকেছেন।

setState(
  { name: "Michael" },
  () => console.log(this.state)
);

উপরের কোডটি শ্রেণীর উপাদানগুলির জন্য সূক্ষ্মভাবে কাজ করে, তবে কার্যকরী উপাদানগুলির ক্ষেত্রে আমরা সেটস্টেট পদ্ধতিটি ব্যবহার করতে পারি না এবং এটি একই ফলাফল অর্জনের জন্য আমরা ব্যবহারের প্রভাব হুকটি ব্যবহার করতে পারি।

স্পষ্ট পদ্ধতিটি, যা মাথায় আসে তা হ'ল ypu ব্যবহারের সাথে ব্যবহার করতে পারে প্রভাবটি নীচের মত:

const [state, setState] = useState({ name: "Michael" })

useEffect(() => {
  console.log(state) // do something after state has updated
}, [state])

তবে এটি প্রথম রেন্ডারেও আগুন লাগবে, তাই আমরা কোডটি নীচে পরিবর্তন করতে পারি যেখানে আমরা প্রথম রেন্ডার ইভেন্টটি পরীক্ষা করতে পারি এবং রাষ্ট্রীয় রেন্ডার এড়াতে পারি। সুতরাং বাস্তবায়ন নিম্নলিখিত উপায়ে করা যেতে পারে:

প্রথম রেন্ডার সনাক্ত করতে আমরা এখানে ব্যবহারকারীর হুক ব্যবহার করতে পারি।

ব্যবহারের রেফ হুক আমাদের কার্যকরী উপাদানগুলিতে পারস্পরিক পরিবর্তনশীল ভেরিয়েবল তৈরি করতে দেয়। এটি ডিওএম নোডগুলি / প্রতিক্রিয়া উপাদানগুলিতে অ্যাক্সেস করার জন্য এবং পুনরায় রেন্ডারটি ট্রিগার না করে পারস্পরিক পরিবর্তনশীলগুলি সঞ্চয় করার জন্য দরকারী।

const [state, setState] = useState({ name: "Michael" });
const firstTimeRender = useRef(true);

useEffect(() => {
 if (!firstTimeRender.current) {
    console.log(state);
  }
}, [state])

useEffect(() => { 
  firstTimeRender.current = false 
}, [])

Question 8

আমার একটি ব্যবহারের কেস ছিল যেখানে আমি রাজ্যটি সেট হওয়ার পরে কিছু প্যারামের সাথে একটি এপি কল করতে চেয়েছিলাম । আমি এই প্যারামগুলিকে আমার রাজ্য হিসাবে সেট করতে চাইনি তাই আমি একটি কাস্টম হুক তৈরি করেছি এবং এটিই আমার সমাধান

import { useState, useCallback, useRef, useEffect } from 'react';
import _isFunction from 'lodash/isFunction';
import _noop from 'lodash/noop';

export const useStateWithCallback = initialState => {
  const [state, setState] = useState(initialState);
  const callbackRef = useRef(_noop);

  const handleStateChange = useCallback((updatedState, callback) => {
    setState(updatedState);
    if (_isFunction(callback)) callbackRef.current = callback;
  }, []);

  useEffect(() => {
    callbackRef.current();
    callbackRef.current = _noop; // to clear the callback after it is executed
  }, [state]);

  return [state, handleStateChange];
};

Question 9

ইউজএফেক্টই প্রাথমিক সমাধান। তবে ড্যারিল যেমন উল্লেখ করেছেন, UseEffect ব্যবহার করে এবং দ্বিতীয় প্যারামিটারের একটি ত্রুটি রয়েছে বলে রাজ্যে পাস হচ্ছে, উপাদানটি আরম্ভের প্রক্রিয়াতে চলবে। আপনি যদি কেবল আপডেট হওয়া রাষ্ট্রের মানটি ব্যবহার করে কলব্যাক ফাংশনটি চালাতে চান তবে আপনি একটি স্থানীয় ধ্রুবক সেট করতে পারেন এবং সেটস্টেট এবং কলব্যাক উভয় ক্ষেত্রেই এটি ব্যবহার করতে পারেন।

const [counter, setCounter] = useState(0);

const doSomething = () => {
  const updatedNumber = 123;
  setCounter(updatedNumber);

  // now you can "do something" with updatedNumber and don't have to worry about the async nature of setState!
  console.log(updatedNumber);
}

প্রতিক্রিয়া হুকগুলিতে কীভাবে `সেটস্টেট` কলব্যাক ব্যবহার করবেন

আমার মনে হয়, ব্যবহার useEffectকরা কোনও স্বজ্ঞাত উপায় নয়।

ব্যবহার

ঘোষণা

খসড়া

আমার মনে হয়, ব্যবহার `useEffect`করা কোনও স্বজ্ঞাত উপায় নয়।