useState Hook Example In ReactJs In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में useState hook एक fundamental hook है जो functional components में state management का feature add करता है।

useState hook काफी simple और easy-to-use है और React applications में dynamic data को handle करने में काफी helpful होता है। पहले, सिर्फ class components में state define किया जा सकता था, लेकिन React hooks ने functional components में भी state management का feature add कर दिया।

इस topic में हम useState hook के basic concept, उसका syntax और example के साथ उसका usage देखेंगे।

●●●

What is useState Hook ?

useState hook एक special React function है जो functional components में state add करता है। यह hook एक array return करता है जिसमे दो elements होते हैं -

• Current State Value - जो current state value को hold करता है।

• State Update Function - एक function जो state को update करने के लिए use होता है।

हर बार जब state update होती है, React component को re-render करता है और updated state को display करता है।

useState Hook Syntax

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

यहां

• state - ये variable current state value को hold करता है।

• setState - ये function new state value set करता है।

• initialValue - ये initial state value है जो state को initially assign किया जाता है।

●●●

ReactJs useState Hook Example

अब हम useState hook का एक simple example देखेंगे जिसमे हम एक counter बनाएंगे जो button click पर increment होता है।

File : src/components/Counter.js

Copy
import React, { useState } from 'react';

function Counter() {
  // Initialize state with an initial value of 0
  const [count, setCount] = useState(0);

  // Function to increment the count
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

Explanation

• useState(0) में 0 initial value set करता है, तो count का initial value 0 है।

• increment function setCount को use करता है ताकि count को 1 से increment किया जा सके।

• Button click पर increment function execute होता है और count का value update होता है, जो component को re-render करता है।

●●●

Multiple State Variables with useState

React में हम useState hook को multiple times call करके अलग-अलग state variables create कर सकते हैं। हर state variable के लिए अलग useState call किया जाता है।

File : src/components/UserInfo.js

Copy
import React, { useState } from 'react';

function UserInfo() {
  // Separate states for name and age
  const [name, setName] = useState('John Doe');
  const [age, setAge] = useState(25);

  return (
    <div>
      <h2>User Information</h2>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
      <button onClick={() => setName('Jane Doe')}>Change Name</button>
      <button onClick={() => setAge(age + 1)}>Increment Age</button>
    </div>
  );
}

export default UserInfo;

Explanation

• यहां हमने name और age के लिए अलग-अलग useState hooks define किये हैं।

• setName और setAge functions का use करके हम respective state को update कर रहे हैं।

• Change Name button click होने पर name update हो जाता है और Increment Age button age को increment करता है।

●●●

Handling Objects In useState

React में अगर state एक complex object या array हो, तो useState hook का use करके हम उस object या array को भी handle कर सकते हैं।

State update करते वक्त हम spread operator (...) का use करके old values को maintain करते हैं और सिर्फ specific properties को update करते हैं।

File : src/components/Profile.js

Copy
// Profile.js
import React, { useState } from 'react';

function Profile() {
  const [user, setUser] = useState({
    name: 'Alice',
    age: 30,
    location: 'New York'
  });

  const updateLocation = () => {
    setUser({
      ...user,
      location: 'Los Angeles'
    });
  };

  return (
    <div>
      <h2>User Profile</h2>
      <p>Name: {user.name}</p>
      <p>Age: {user.age}</p>
      <p>Location: {user.location}</p>
      <button onClick={updateLocation}>Change Location</button>
    </div>
  );
}

export default Profile;

Explanation

• user object में name, age, और location properties हैं।

• updateLocation function spread operator का use करके user object को update करता है और location property को new value "Los Angeles" set करता है।

• Spread operator ...user use करने का purpose ये है कि पहले से existing properties (name और age) maintain हो जाएँ और सिर्फ location को update किया जाये।

●●●

Using useState with Arrays

React में useState का use arrays के साथ भी किया जा सकता है। जैसे अगर हम एक list manage करना चाहते हैं जिसमे new items add हो रहे हैं, तो हम array state को update कर सकते हैं।

File : src/components/TodoList.js

Copy
import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Build a project']);

  const addTodo = () => {
    setTodos([...todos, 'New Task']);
  };

  return (
    <div>
      <h2>Todo List</h2>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={addTodo}>Add New Task</button>
    </div>
  );
}

export default TodoList;

Explanation

• todos array में initial tasks store हैं।

• addTodo() function में हम setTodos का use कर रहे हैं और spread operator ...todos का use करके existing array को maintain कर रहे हैं और usme एक नया item add कर रहे हैं (New Task) .

• map function का use करके हर todo item को render किया गया है।

●●●

I Hope , अब आपको useState hook के बारे में थोड़ा idea लग गया होगा। ।

Happy coding! 🎉