🪝 Using useState Hook — Declaring State Variables

The `useState` hook lets you add state to functional components. It returns two things: the current state value and a function to update it.

🎯 useState Syntax

`useState` takes an initial value and returns an array with the state value and an updater function. Use array destructuring to give them names.

The `useState` hook is imported from React. Call it inside your component to create a state variable. It returns `[currentValue, functionToUpdateIt]`.

import { useState } from 'react';

function Counter() {
  // Declare state: [currentValue, updateFunction] = useState(initialValue)
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example: State with different data types

function Form() {
  const [name, setName] = useState('');           // String
  const [age, setAge] = useState(0);              // Number
  const [isStudent, setIsStudent] = useState(true); // Boolean
  const [items, setItems] = useState([]);         // Array
  const [user, setUser] = useState({ id: 1 });   // Object

  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <p>Name: {name}</p>
    </div>
  );
}

</details>

💡 Naming Conventions

The updater function is usually named `set` + the variable name. `count` → `setCount`, `isOpen` → `setIsOpen`.

For clarity and consistency, always use the `set` prefix. This makes it obvious that it's an updater function.

import { useState } from 'react';

function ShoppingList() {
  const [items, setItems] = useState([]);
  const [total, setTotal] = useState(0);
  const [isLoading, setIsLoading] = useState(false);

  return (
    <div>
      <p>Items: {items.length}</p>
      <p>Total: ${total}</p>
      <p>Loading: {isLoading ? 'Yes' : 'No'}</p>
    </div>
  );
}

<details>

<summary>📚 More Examples</summary>

// Example: Multiple state variables

function Profile() {
  const [firstName, setFirstName] = useState('John');
  const [lastName, setLastName] = useState('Doe');
  const [email, setEmail] = useState('john@example.com');

  return (
    <div>
      <p>Name: {firstName} {lastName}</p>
      <p>Email: {email}</p>
      <button onClick={() => setFirstName('Jane')}>
        Change Name
      </button>
    </div>
  );
}

</details>

🔧 Initial Values

The argument to `useState` is the initial value. It can be any type: string, number, boolean, array, object, or even a function.

import { useState } from 'react';

function Examples() {
  // Primitive values
  const [counter, setCounter] = useState(0);
  const [text, setText] = useState('hello');

  // Complex values
  const [user, setUser] = useState({ name: 'John', age: 30 });
  const [tags, setTags] = useState(['javascript', 'react']);

  return (
    <div>
      <p>Counter: {counter}</p>
      <p>User: {user.name}</p>
    </div>
  );
}

📊 Summary

🔑 Key Takeaways

• ✅ `useState` is a React hook for adding state to functional components

• ✅ Syntax: `const [value, setValue] = useState(initialValue)`

• ✅ Use the value in your JSX, call the setter to update

• ✅ Naming convention: `set` + capitalized variable name

• ✅ State can be any JavaScript type

• ✅ Each component gets its own separate state

Ready to practice? Challenges | Next: Updating State