useState in React: कम्पलीट गाइड, usestate react काम कैसे करता है?

usestate react का एक महत्वपूर्ण टॉपिक है क्योंकि इसका काफ़ी ज़्यादा इस्तेमाल किया जाता है, useState react के hook में से एक है जो की आपके component में एक state variable को जोड़ता है |

अगर आपने react js सीखना शुरू किया है तो आज का आर्टिकल आपको बहुत ज़्यादा सहायता करने वाला है इसलिए शुरू से लेकर अंत तक ज़रूर पढ़ें |

useState in React

useState क्या है?: react में useState एक hook है जो की आपके functional components में state को जोड़ता है, पहले class based component चलते थे उनमें भी state होती थीं लेकिन तरीक़ा कुछ और होता था |

State डेटा को स्टोर करने का एक तरीक़ा होता है जो की किसी component में समय-समय पर बदलता रहता है और जब भी डेटा change होता है react पेज को अपडेट करता है, इसके अलावा एक जरूरी बात की state में डेटा कुछ भी हो सकता है जैसे की number, बुलियन या कोई object आदि |

useState काम कैसे करता है?

दोस्तों state एक तरह से एक वेरिबल ही होता है जो की डेटा या कोई वैल्यू स्टोर करता है, लेकिन यह normal variable से काफ़ी अलग होता है क्योंकि useState की सहायता से हमे काफ़ी ज़्यादा flexibility मिलती है जिससे हम अपने डेटा को किसी भी तरह से manipulate कर सकते हैं |

useState in React syntex:

const [state, setState] = useState(initialValue);

यह useState का syntex है जिसकी सहायता से इसका इस्तेमाल किया जाता है, आइए आगे जानते हैं कि यह काम कैसे करता है?

1. const: इसका इस्तेमाल javascript में एक variable declare करने के लिए किया जाता है |
2. state: यह उस variable की current value को store करता है |
3. setState: यह एक function है जिसकी सहायता से हम state की वैल्यू को change कर सकते हैं |
4. useState(initialValue): इसमें useState की पहली या initialValue होती है जिसको हम अपने अनुसार setState की सहायता से बाद में चेंज कर सकते हैं और यह हमेशा array return करता है, और जो array है वो दो चीज़ें रखता है पहला है state की current value और दूसरा है function जिसकी सहायता से हम state की value को चेंज करते है |

नीचे आप इसका कोड देख सकते हैं,

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1); // Update state using setCount
  };

  return (
    <div>
      <p>You clicked {count} times</p> 
      <button onClick={increment}>Click me</button>
    </div>
  );
}

export default Counter;

इस कोड में शुरुवाती value 0 है लेकिन जब हम button पर click करते हैं तो हर बार value 1 से बढ़ती है या लास्ट value में 1 plus होती है तो इसमें हमारी state की शुरुवाती value change हो रही है |

यह सिर्फ़ एक score का example है इसकी जगह आप click पर popup बना सकते हैं, hide show कर सकते हैं या फिर अपनी जरूरत के हिसाब से काफ़ी काम कर सकते हैं क्योंकि state में data store होता है और data कुछ भी हो सकता है, कोई API का data हो सकता है जिसमें object, array, number कुछ भी हो सकता है |