React Hooks state not working properly when the function calling it is called in another function

Question

I have this component using Hooks:

function App() {
  const [text, setText] = useState({ h1: "hello", h2: "hi" });

  const changeH1 = () => {
    setText({
      ...text,
      h1: text.h1 + "C"
    });
  };

  const changeH2 = () => {
    setText({
      ...text,
      h2: text.h2 + "X"
    });
  };

  const changeAll = () => {
    changeH1();
    changeH2();
  };

  return (
    <div className="App">
      <h1 onClick={() => changeH1()}>{text.h1}</h1>
      <h1 onClick={() => changeH2()}>{text.h2}</h1>
      <button onClick={() => changeAll()}>Change</button>
    </div>
  );
}

It will display two headings with some text and a button. When I click on the first heading, the "C" character will be added to the heading. When I click on the second heading, the "X" character will be added to the heading. When I click the button, it will do two actions above at the same time.

It works fine on two headings but the button. When I click the button, only the second heading changes. I think that the setText of changeH1 and changeH2 are not working when they are called in changeAll. What's wrong with my code?

<button onClick={() => changeAll}>Change</button> try to replace changeAll by changeAll() — Santosh Shinde
– Santosh Shinde, Commented Apr 6, 2019 at 8:49

Aprillion · Accepted Answer · 2019-04-06 09:10:33Z

1

Because changeH2() overwrites h1 property by doing ...text.

The 2 setText() calls are executed before a re-render - I believe it's due to batching as explained in https://overreacted.io/react-as-a-ui-runtime/#batching

A solution would be to use a simple state instead of an object:

  const [h1, setH1] = useState("hello");
  const [h2, setH2] = useState("hi");
  ...

Or else useReducer for more complex operations https://reactjs.org/docs/hooks-reference.html#usereducer

answered Apr 6, 2019 at 9:10

Aprillion

22.4k6 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React Hooks state not working properly when the function calling it is called in another function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related