Search code examples
reactjsreact-dom

What does flushSync() do in React?

I saw Dan Abramov's demo project at JSConf Iceland, but I didn't understand why he used flushSync in this code:

  import { flushSync } from 'react-dom';

  debouncedHandleChange = _.debounce(value => {
    if (this.state.strategy === 'debounced') {
      flushSync(() => {
        this.setState({value: value});
      });
    }
  }, 1000);

What does flushSync do in react?

Solution

  • flushSync flushes the entire tree and actually forces complete re-rendering for updates that happen inside of a call, so you should use it very sparingly. This way it doesn’t break the guarantee of internal consistency between props, state, and refs.

    It is not documented properly yet. Read more here https://github.com/facebook/react/issues/11527