+ [New in 18: useEffect fires synchronously when it's the result of a discrete input](https://github.com/reactwg/react-18/discussions/128)

## discrete input

In React 17 and below, the function passed to useEffect typically fires asynchronously after the browser has painted. The idea is to defer as much work as possible until paint so that the user experience is not delayed. This includes things like setting up subscriptions.

For example, imagine you're building a form that disables "submit" after the first submission:

```js

useEffect(() => {

  if (!disableSubmit) {

    const form = formRef.current;

    form.addEventListener('submit', onSubmit);

    return () => {

      form.removeEventListener('submit', onSubmit);

    };

  }

}, [disableSubmit, onSubmit]);

```

If the user attempts to submit the form multiple times in quick succession, we need to make sure the effects from the first event have completely finished before the next input is processed. So we synchronously flush them.

We don't need to do this for events that aren't discrete, because we assume they are not order-dependent and do not need to be observed by external systems.

似乎其实用 useLayoutEffect 也就行了，但是 useLayoutEffect 会让其导致的更新也会同步执行。  

Note that this only affects the timing of when useEffect functions are called. **It does not affect the priority of updates that are triggered inside a useEffect**. They still get the default priority. (This is in contrast to useLayoutEffect, which not only calls the effect callback synchronously but also gives synchronous priority to its updates.)