प्रतिक्रिया हुक पर `setState` कॉलबैक का उपयोग कैसे करें

Question 1

useStateघटक राज्य की स्थापना के लिए रिएक्ट हुक परिचय । लेकिन मैं नीचे दिए गए कोड की तरह कॉलबैक को बदलने के लिए हुक का उपयोग कैसे कर सकता हूं:

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

मैं राज्य के अपडेट होने के बाद कुछ करना चाहता हूं।

मुझे पता है कि मैं useEffectअतिरिक्त चीजें करने के लिए उपयोग कर सकता हूं लेकिन मुझे राज्य के पिछले मूल्य की जांच करनी होगी जिसके लिए थोड़ा कोड की आवश्यकता होती है। मैं एक सरल समाधान की तलाश में हूं जिसका उपयोग 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, कि केवल राज्य अद्यतन पर आग :

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 5

मुझे लगता है, का उपयोग `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;

कमी

यदि पारित तीर फ़ंक्शन एक चर बाहरी फ़ंक्शन का संदर्भ देता है, तो यह राज्य के अद्यतन होने के बाद वर्तमान मूल्य पर कब्जा नहीं करेगा। उपरोक्त उपयोग के उदाहरण में, कंसोल.लॉग (राज्य) 1 नहीं 2 को प्रिंट करेगा।

Question 6

setState() घटक अवस्था में परिवर्तन करता है और प्रतिक्रिया को बताता है कि इस घटक और उसके बच्चों को अद्यतन स्थिति के साथ फिर से प्रस्तुत करने की आवश्यकता है।

setState पद्धति अतुल्यकालिक है, और तथ्य की बात के रूप में, यह एक वादा वापस नहीं करता है। इसलिए ऐसे मामलों में जहां हम किसी फ़ंक्शन को अपडेट या कॉल करना चाहते हैं, फ़ंक्शन को सेटबैक फ़ंक्शन में कॉलबैक कहा जा सकता है दूसरा तर्क। उदाहरण के लिए, ऊपर दिए गए आपके मामले में, आपने एक फ़ंक्शन को एक सेटस्टैट कॉलबैक कहा है।

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

उपरोक्त कोड वर्ग घटक के लिए ठीक काम करता है, लेकिन कार्यात्मक घटक के मामले में, हम सेटस्टेट विधि का उपयोग नहीं कर सकते हैं, और हम उसी परिणाम को प्राप्त करने के लिए उपयोग प्रभाव हुक का उपयोग कर सकते हैं।

स्पष्ट विधि, जो ध्यान में आती है कि यूपीयू उपयोग कर सकता है

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

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

लेकिन यह पहले रेंडर पर भी फायर करेगा, इसलिए हम कोड को निम्न प्रकार से बदल सकते हैं जहां हम पहले रेंडर इवेंट की जांच कर सकते हैं और स्टेट रेंडर से बच सकते हैं। इसलिए कार्यान्वयन निम्नलिखित तरीके से किया जा सकता है:

हम पहले रेंडर की पहचान करने के लिए यहां उपयोगकर्ता हुक का उपयोग कर सकते हैं।

UseRef हुक हमें कार्यात्मक घटकों में उत्परिवर्तनीय चर बनाने की अनुमति देता है। यह डोम नोड्स / रिएक्ट तत्वों तक पहुँचने और पुन: रेंडर करने के लिए बिना परिवर्तनशील चर को स्टोर करने के लिए उपयोगी है।

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

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

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

Question 7

मैं एक ही समस्या में चल रहा था, मेरे सेटअप में useEffect का उपयोग कर चाल नहीं चला रहा था (मैं एक सरणी एकाधिक बाल घटकों से माता-पिता की स्थिति को अपडेट कर रहा हूं और मुझे यह जानने की आवश्यकता है कि किस घटक ने डेटा अपडेट किया है)।

वादे में सेटस्टैट लपेटकर पूरा होने के बाद एक मनमाना कार्रवाई करने की अनुमति देता है:

import React, {useState} from 'react'

function App() {
  const [count, setCount] = useState(0)

  function handleClick(){
    Promise.resolve()
      .then(() => { setCount(count => count+1)})
      .then(() => console.log(count))
  }


  return (
    <button onClick= {handleClick}> Increase counter </button>
  )
}

export default App;

निम्नलिखित प्रश्न ने मुझे सही दिशा में लगाया: क्या हुक का उपयोग करते समय रिएक्ट बैच स्थिति अद्यतन करता है?

Question 8

आपका प्रश्न बहुत ही मान्य है। मुझे बताएं कि उपयोग डिफ़ॉल्ट रूप से एक बार चलता है और हर बार निर्भरता सरणी में परिवर्तन होता है।

नीचे दिए गए उदाहरण की जाँच करें ::

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;

यदि आप चाहते हैं कि सेटस्टैट कॉलबैक को हुक के साथ निष्पादित किया जाए, तो फ्लैग वेरिएबल का उपयोग करें और IFESE या IF ब्लॉक को उपयोग के अंदर दें, ताकि जब स्थिति संतुष्ट हो जाए, तभी उस कोड ब्लॉक को निष्पादित करें। किसी भी समय प्रभाव निर्भरता सरणी परिवर्तन के रूप में चलता है लेकिन यह कि प्रभाव के अंदर IF कोड केवल उस विशिष्ट स्थितियों पर ही अमल करेगा।

Question 9

मेरे पास एक उपयोग का मामला था जहां मैं राज्य के सेट होने के बाद कुछ परम के साथ एक एपीआई कॉल करना चाहता था । मैं उन पारमों को अपने राज्य के रूप में स्थापित नहीं करना चाहता था इसलिए मैंने एक कस्टम हुक बनाया और यहाँ मेरा समाधान है

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 10

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);
}

प्रतिक्रिया हुक पर `setState` कॉलबैक का उपयोग कैसे करें

मुझे लगता है, का उपयोग useEffectकरना एक सहज तरीका नहीं है।

प्रयोग

घोषणा

कमी

मुझे लगता है, का उपयोग `useEffect`करना एक सहज तरीका नहीं है।