В чём разница этих способов изменения состояния на противоположное?

Question

[Дмитрий Марков]

Почему во всех статьях(которые я видел) используют первый способ?

const [data, setData] = useState(false);
Способ 1
setData(prev => !prev); // true
setData(prev => !prev); // false
setData(prev => !prev); // true
Способ 2
setData(!data) // true
setData(!data) // false
setData(!data) // true

или к примеру если нужно добавить в массив к уже имеющимся записям

const [data, setData] = useState([1, 2, 3]);
const newData = [4, 5, 6];
setData(prev => [...prev, ...newData]);
// data = [1, 2, 3, 4, 5, 6]
и
setData([...data, ...newData]);
// data = [1, 2, 3, 4, 5, 6]

Ведь 'способ 2' короче. Может есть ещё смысл этого ?

Постскриптум, пожалуйста без оскорблений)

Answer 1

[Nikolay Matyushkin]

Простите за мою лень))
Читать тут

Answer 2

[n1ksON]

Правильнее будет использовать первый способ.
Использование prev (предыдущего state), гарантирует корректную работу хука и отсутствие мутации.
Для начала можете посмотреть пример здесь
Подробнее почитайте документацию

Comments

[Антон Иванов]

n1ksON Простите, внимательно изучил еще раз документацию. На нашел я там разницы в двух способах. Не могли бы вы "на пальцах" объяснить? И кроме того, в чем плоха мутация? В обоих записях результат один.

[Александр]

Антон, Конечно в Вашем примере нет никакой разницы. Но представим, что есть такой код:

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

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

	const increment1 = () => {
		setTimeout(() => {
			setCount(count => count + 1);
		},100);
	};

	const increment2 = () => {
		setTimeout(() => {
			setCount(count + 1);
		}, 100);
	}

	useEffect(() => {
		increment1();
		increment2();
	}, []);

	return <p>{count}</p>
};

В таком случае, count будет равным 1, а не 2. Ну а в реальном проекте это чревато серьезными проблемами (особенно когда в state лежит некий объект).

[Антон Иванов]

Александр, я не топик стартер :) Но мне было действительно интересно. Спасибо за разъяснения.

Answer 3

[Антон Иванов]

Использую только второй способ. Никаких проблем. Это просто краткая запись.

Comments

[n1ksON]

ошибаетесь, сеньор-помидор)