react_useClassState.js

import React, { useState, useCallback, useEffect } from "react";

export default function App() {
  const [state, setState] = useClassState({
    d1: 0,
    d2: 0,
    d3: 0,
    multiple: 0
  });

  const changeStateMultiple = () => {
    setState(s => ({
      d1: s.d1 + 1
    }));
    setState(s => ({
      d2: s.d1 + 1
    }));
    setState(s => ({
      d3: s.d2 + 1
    }));
    //sync setState
    setState(s => ({
      multiple: s.d3 + 1
    }));
  };
  useEffect(() => {
    console.log("Effect Run d1", state.d1);
  }, [state.d1]);

  useEffect(() => {
    console.log("Effect Run d2", state.d2);
  }, [state.d2]);
  useEffect(() => {
    console.log("Effect Run d3", state.d3);
  }, [state.d3]);
  useEffect(() => {
    console.log("Effect Run multiple", state.multiple);
  }, [state.multiple]);

  return (
    <div className="App">
      <p>Data 1 {state.d1}</p>
    //No spread operator
      <button onClick={() => setState({ d1: state.d1 + 1 })}>Click d1</button>

      <p>Data 2 {state.d2}</p>
      <button onClick={() => setState({ d2: state.d2 + 1 })}>Click d2</button>

      <p>Data 3 {state.d3}</p>
      <button onClick={() => setState({ d3: state.d3 + 1 })}>Click d3</button>

      <p>Change State Multiple Times {state.multiple}</p>
      <button onClick={changeStateMultiple}>Change Multiple</button>
    </div>
  );
}