I tried to understand the fragment of an example here / about useSelect.

function DisplayTOC(props) {
  return (  <ServerSideRender block={props.name} attributes={props.attributes} />);
}


registerBlockType('simpletoc/toc', {
  title: __('SimpleTOC', 'simpletoc'),
  icon: simpletocicon,
  category: 'layout',
  edit: function(props) {
    return (

      <p className={props.className}>
        <AsyncModeProvider value={ true }>
          <DisplayTOC props={props}/>
        </AsyncModeProvider>
      </p>

    )
  },
  save: props => {
    return null;
  },
});

So my guess is that the Async method needs to know when to sync with useSelect. But where? In the documentation there is this function:

function BlockCount() {
  const count = useSelect( ( select ) => {
    return select( 'core/block-editor' ).getBlockCount()
  }, [] );

  return count;
}

So if a new block is added return the count. But when is this function called? I added it to the code and nothing happens.

I tried to understand the fragment of an example here https://developer.wordpress/block-editor/packages/packages-data/ about useSelect.

function DisplayTOC(props) {
  return (  <ServerSideRender block={props.name} attributes={props.attributes} />);
}


registerBlockType('simpletoc/toc', {
  title: __('SimpleTOC', 'simpletoc'),
  icon: simpletocicon,
  category: 'layout',
  edit: function(props) {
    return (

      <p className={props.className}>
        <AsyncModeProvider value={ true }>
          <DisplayTOC props={props}/>
        </AsyncModeProvider>
      </p>

    )
  },
  save: props => {
    return null;
  },
});

So my guess is that the Async method needs to know when to sync with useSelect. But where? In the documentation there is this function:

function BlockCount() {
  const count = useSelect( ( select ) => {
    return select( 'core/block-editor' ).getBlockCount()
  }, [] );

  return count;
}

So if a new block is added return the count. But when is this function called? I added it to the code and nothing happens.

• plugins
• block-editor

1 Answer 1

It's called when the component is first rendered, then again when the dependencies declared in the second parameter change:

deps Array: If provided, this memoizes the mapSelect so the same mapSelect is invoked on every state change unless the dependencies change.

So don't pass that array, and it will work as you expected.