प्रतिक्रिया useStateहुक

रिएक्ट useStateहुक हमें फ़ंक्शन घटक में स्थिति को ट्रैक करने की अनुमति देता है।

राज्य आम तौर पर डेटा या उचितता को संदर्भित करता है जिसे किसी एप्लिकेशन में ट्रैक करने की आवश्यकता होती है।

आयातuseState

हुक का उपयोग करने के लिए useState, हमें पहले importइसे अपने घटक में शामिल करना होगा।

import { useState } from "react";

ध्यान दें कि हम इसे एक नामित निर्यात के रूप useStateमें नष्ट कर रहे हैं ।react

प्रारंभ useState

useStateहम अपने फंक्शन कंपोनेंट को कॉल करके अपने स्टेट को इनिशियलाइज़ करते हैं।

useState प्रारंभिक स्थिति स्वीकार करता है और दो मान देता है:

• वर्तमान राज्य।
• एक फ़ंक्शन जो राज्य को अद्यतन करता है।

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

ध्यान दें कि फिर से, हम से लौटाए गए मानों को नष्ट कर रहे हैं useState।

पहला मान, colorहमारी वर्तमान स्थिति है।

दूसरा मान, setColor, fuction है जिसका उपयोग हमारे राज्य को अद्यतन करने के लिए किया जाता है।

अंत में, हम प्रारंभिक स्थिति को एक खाली स्ट्रिंग पर सेट करते हैं: useState("")

राज्य पढ़ें

अब हम अपने राज्य को अपने घटक में कहीं भी शामिल कर सकते हैं।

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

अद्यतन स्थिति

अपने राज्य को अद्यतन करने के लिए, हम अपने राज्य अद्यतनकर्ता फ़ंक्शन का उपयोग करते हैं।

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

राज्य क्या पकड़ सकता है

हुक का useStateउपयोग स्ट्रिंग्स, नंबर्स, बूलियन्स, एरेज़, ऑब्जेक्ट्स और इनमें से किसी भी संयोजन का ट्रैक रखने के लिए किया जा सकता है!

हम अलग-अलग मूल्यों को ट्रैक करने के लिए कई राज्य हुक बना सकते हैं।

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

या, हम सिर्फ एक राज्य का उपयोग कर सकते हैं और इसके बजाय एक वस्तु शामिल कर सकते हैं!

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

राज्य में वस्तुओं और सरणियों को अद्यतन करना

जब राज्य को अद्यतन किया जाता है, तो पूरा राज्य अधिलेखित हो जाता है।

क्या होगा अगर हम केवल अपनी कार का रंग अपडेट करना चाहते हैं?

अगर हम केवल कॉल करते हैं setCar({color: "blue"}), तो यह हमारे राज्य से ब्रांड, मॉडल और वर्ष को हटा देगा।

हम अपनी सहायता के लिए जावास्क्रिप्ट स्प्रेड ऑपरेटर का उपयोग कर सकते हैं।

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

क्योंकि हमें राज्य के वर्तमान मूल्य की आवश्यकता है, हम अपने फ़ंक्शन में एक फ़ंक्शन पास करते setCarहैं। यह फ़ंक्शन पिछला मान प्राप्त करता है।

हम तब एक वस्तु लौटाते हैं, previousStateकेवल रंग फैलाते हैं और ओवरराइट करते हैं।

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}