使用useEffect时，react组件会渲染几次

Question

I use functional react component with hooks.

const [loaded, setLoaded] = React.useState(null);
const [title, setTitle] = React.useState(title);

React.useEffect(() => {
    //...
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then(json => {
          setLoaded(true);
          setTitle(title);
      });
}, []);

In this case, the component is rendered twice. On the one hand, it seems to be logical.

But I also have a checkbox handler in this component

const changeHandler = event => {
    //...
    setTotal(new_total);
    setError(false);
};

In this case, two rendering does not occur, although state also changes 2 times. I can't understand why this is happening.

PS

There is no problem to solve this problem, I wonder why this is exactly what happens

UPD :

If I set in useEffect

setLoaded(true);
setTitle(title);
setTitle2(title);
setTitle3(title);

will be 4 re-renders, and if I set in changeHandler

setTotal(new_total);
setError(false);
setError2(false);
setError3(false);

will be 1 re-render

Answer 1

A side effect of calling setter method of the useState() hook, is that doing so triggers the component to re-render.

One solution to avoid the redundant re-render would be to merge your component state like this:

function functionalComponent() {

    /* Merge both values into common "state object */
    const [{ loaded, title }, setState] = React.useState({ 
        loaded : null, 
        title : "inital title" 
    });

    React.useEffect(() => {

        /* 
        Single call to setState triggers on re-render only. The
        value of "new title" for title could have been set in the
        inital state, however I set it here to show how combined
        state can be updated with a single call to setState()  
        */
        setState({ loaded : true, title : "new title" })

        /*
        setLoaded(true);
        setTitle(title);
        */
    }, []);

    /* Use loaded and title variables as needed during render */
    return <div>{ loaded } - { title }</div>
}

Answer 2

React wraps your event handlers in a call to unstable_batchedUpdates() , so that your handler runs inside a callback. Any state updates triggered inside that callback will be batched. Any state updates triggered outside that callback will not be batched. Timeouts, promises, and async functions will end up executing outside that callback, and therefore not be batched.

https://github.com/facebook/react/issues/14259