Отслеживать изменения в состоянии?

Question

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

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

Решение, которое я нашел с помощью useEffect (), выглядит избыточным, потому что вариантов может быть во много раз больше.

const [hiddenData, setHiddenData] = useState(server.hidden_data);
const [hiddenProfile, setHiddenProfile] = useState(server.hidden_profile);
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>You have unsaved changes!</div>}
  </>
);

Answer 1

Может как то?

const [draftState, setDraftState] = useState(server)
const [state, setState] = useState(server)

// a more complex object with the list of changed props is fine too
const isChanged = lodash.isEqual(state, draftState)

function changeProp (prop, value) {
  setState({
    ...draftState,
    [prop]: value
  })
}

function saveState () {
  setState(draftState)
  // Persist state if needed
}