useState когда использовать?

useState когда использовать?

Комментарии
Содержание
  1. 1. Управление простым состоянием:
  2. 3. Управление булевым состоянием:
  3. 4. Управление сложным государством:
  4. 5. Управление состоянием массива:
  5. 6. Обновление состояния на основе предыдущего состояния:

1. Управление простым состоянием:

import React, { useState } from 'react';

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

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

3. Управление булевым состоянием:

import React, { useState } from 'react';

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

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

4. Управление сложным государством:

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>
			Name: {person.name}
			Age: {person.age}
			<input type="text" name="name" value={person.name} onChange={handleInputChange} />
			<input type="number" name="age" value={person.age} onChange={handleInputChange} />
		</div>
	);
}

5. Управление состоянием массива:

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>
	);
}

6. Обновление состояния на основе предыдущего состояния:

import React, { useState } from 'react';

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

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

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

Это лишь несколько примеров из множества вариантов использования хука useState. Хук очень универсален и может быть использован для управления любым состоянием в компоненте React.