setAttributes is slow resulting in retrieving attributes old values

[bomsn]

Describe the bug
When using setAttributes in the edit object it's not updating attributes right away. This result in the old values being returned if you tried to retrieve from dataset right after calling setAttributes

To reproduce
Steps to reproduce the behavior:

1. Render the following:

    <Fragment>
      <InspectorControls>
            <PanelBody
                title="Date & Time"
                icon=""
                initialOpen={ false }
            >
                <PanelRow>
                <DateTimePicker
                    currentDate={ attributes.datetime }
                    onChange={ ( val ) => onUpdateDate( val ) }
                    is12Hour={ true }
                />
                </PanelRow>
            </PanelBody>
     <InspectorControls>
     <div className={ 'datetimediv' } data-datetime={datetime}></div>
</Fragment>

2. Use the update function like this:

  const onUpdateDate = ( dateTime ) => {
      var newDateTime = moment(dateTime).format( 'YYYY-MM-DD HH:mm' );
      setAttributes( { datetime: newDateTime } );
      // This will return the old value not the one that we just set above
      console.log( document.getElementsByClassName('datetimediv')[0].dataset.datetime );
  };

Expected behavior
If we used the dataset property on the element that we just updated it should return the updated value.

Workaround
If you do this it will return the correct value

  const onUpdateDate = ( dateTime ) => {
      var newDateTime = moment(dateTime).format( 'YYYY-MM-DD HH:mm' );
      setAttributes( { datetime: newDateTime } );
      setTimeout(function(){
          console.log( document.getElementsByClassName('datetimediv')[0].dataset.datetime );
      }, 100);
  };

[swissspidy]

I think what you are describing here is not slowness nor a bug, but the asynchronous nature of JavaScript and its event loop, and in this particular instance the data store.

In your particular example, why are you accessing the DOM to get the value when you already have newDateTime?

[bomsn]

@swissspidy I think for this reason there need to be a listener after setAttributes is done or a way to initiate some action after it's complete.

And for your question regarding the DOM, that's not actually the code I'm using, it's just an example. I created a countdown block, after setAttributes I'm calling a function from frontend.js to update countdown different values and apply different functionality.

Why I don't pass the variable to the function I'm calling?
Because there is a large number of attributes and I need to run a specific function that searches the DOM for this data, I can't pass the new attribute value because the same function is responsible on frontend view.

You can see my full code here: countdown-pro-for-gutenberg

[aduth]

Previously: #5596

This is working as intended. The DOM is not intended to serve as a source of truth. Your block components should respond to changes in the incoming attributes prop.

There is more information in #5596, but this is also simpler these days with the introduction of React's useEffect (available at wp.element.useEffect):

https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect

Following the code example there, you could define props.attributes.datetime in the second argument array, and the callback would be triggered any time it changes.