useState when to use?

1. Managing simple state:

import React, { useState } from 'react';

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

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

2. Managing boolean state:

import React, { useState } from 'react';

function Example() {
  const [isOn, setIsOn] = useState(false);

  return (
    <div>
      <p>The light is {isOn ? 'on' : 'off'}</p>
      <button onClick={() => setIsOn(!isOn)}>
        {isOn ? 'Turn off' : 'Turn on'}
      </button>
    </div>
  );
}

3. Managing complex state:

import React, { useState } from 'react';

function Example() {
  const [person, setPerson] = useState({ name: '', age: 0 });

  const handleInputChange = event => {
    const { name, value } = event.target;
    setPerson({ ...person, [name]: value });
  };

  return (
    <div>
      <p>Name: {person.name}</p>
      <p>Age: {person.age}</p>
      <input
        type="text"
        name="name"
        value={person.name}
        onChange={handleInputChange}
      />
      <input
        type="number"
        name="age"
        value={person.age}
        onChange={handleInputChange}
      />
    </div>
  );
}

4. Managing array state:

import React, { useState } from 'react';

function Example() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = () => {
    setTodos([...todos, { id: Date.now(), text: 'New todo' }]);
  };

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Add todo</button>
    </div>
  );
}

5. Updating state based on previous state:

import React, { useState } from 'react';

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

  const handleIncrement = () => {
    setCount(prevCount => prevCount + 1);
  };

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

These are just a few examples of the many use cases of the useState hook. The hook is very versatile and can be used to manage any kind of state within a React component.