DEV Community

official_dulin
official_dulin

Posted on

Is it a bad design to remove the setState callback?

When we use React class component, there is a instance method setState(updater[, callback])

setState callback which is guaranteed to fire after the update has been applied.

However, when we use the setState method returned by useState() hook, it has no callback anymore.

Let's compare setState(updater[, callback]) and the setState returns by useState() hook.

// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  this.setState(nextState, () => {
    // step 2. call API
  });
}
//...
Enter fullscreen mode Exit fullscreen mode
const [state, setState] = useState();
useEffect(() => {
  // step 2. call API
}, [state]);

// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...

const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  setState(nextState);
}
Enter fullscreen mode Exit fullscreen mode

Do you see the difference?

When the button click event occurs, we have two parts of logic: update state and call API.

In the former case, the two parts of the logic code are organized together, and the execution order and code writing order are the same.

In the latter case, the two parts of the logic are split in different places, the logic for updating the state is in the event handler and the logic for the call API is placed in useEffect(). And the order of execution and the order of reading (writing) is not the same.

Some people have the same view as me, such as https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react

That's why someone implements a useStateCallback hook.

What do you think?

Top comments (2)

Collapse
 
cfv1984 profile image
CFV

Literally just have a hook encapsulating this logic instead of grafting hundreds of lines of random state management stuff into your component.
It’s easier to maintain later.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

useCallback