Отслеживание изменений в state?

Question

[Wondermarin]

В коде компонента есть несколько state'ов, каждый имеет начальное значение полученное с сервера. Как я могу отследить, что один из них (или сразу несколько) изменили свое состояние с начального, дабы предложить пользователю сохранить изменения или же сбросить их?

Нечто подобное можно встретить в Discord при изменении настроек профиля / сервера.

Answer 1

[Руслан Золотарёв]

Я так понял, вы имеете ввиду один state с разными полями или несколько хуков. Проверяете их через условный оператор. Например, у нас есть текстовое поле. Вот состояние под него:

const [text, setText] = useState('');

Вешаете на текстовое поле onChange и ему setText(value). Далее можно под текстовым полем замутить span, который будет отображать текст в случае того, что поле не того размера (допустим меньше 3 символов).

{(text <= 3) && <span>введённый текст должен быть длиннее трёх знаков</span>}

Comments

[Wondermarin]

Нет. это работает иначе.

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

Вот пример:

const [hiddenData, setHiddenData] = useState(server.hidden_data);
const [hiddenProfile, setHiddenProfile] = useState(server.hidden_profile);

Представим, что пользователь хочет скрыть свой профиль, переключает данную опцию в настройках, state изменяется на true (что не равно начальному значению - false) и далее ему предлагают сохранить данные изменения.

Можно решить это через useEffect, например:

const [isChanged, setIsChanged] = useState(false);

useEffect(() => {
  if (hiddenData !== server.hidden_data
  || hiddenProfile !== server.hidden_profile) {
    setIsChanged(true);
  } else {
    setIsChanged(false);
  }
}, [hiddenData, server.hidden_data, hiddenProfile, server.hidden_profile]);

return (
  <>
    {isChanged && <div>Были внесены изменения, сохраните их</div>}
  </>
);

Но вариант с useEffect выглядит избыточным, ибо опций может быть в разы больше чем две.

[Руслан Золотарёв]

Тогда, я думаю, тут только useEffect. Дело в том, что если вы поступите как я описал выше, то есть сократите кусок кода и решите проверять булевы значения и выставлять их в какой-нибудь display = 'none', то по факту у вас будет висеть на странице невидимый блок с кнопкой "сохранить". Кто догадается или найдёт его случайно)) - просто откроет и будет играть с вашей безопасностью приложения, начнёт нарушать логику) А так вы хотя бы гарантируете что компонент будет вставляться в DOM только в том случае, если изменилось состояние. Это даже более соответствует философии react - изменилось состояние - изменилась картинка
Личное моё мнение

[Wondermarin]

Руслан Золотарёв, невидимый блок с "display: none" висеть не будет, ибо он монтируется в dom-дерево, когда isChanged = true.