0
   const postType = useSelect(
            ( select ) => {
                console.log("RUN");
                return select( 'core/editor' ).getCurrentPostType();
            },
            []
        );

I have the above in a component. With [] I see 'RUN' 3 times. Without it I see 'RUN' 4 times.

I am trying to understand this. This is helpful - but still not 100% clear.

In both cases the actual component is rendered 3 times.

My concern is that I won't want to miss updated data by using it. In this case postType doesn't change so I feel it is safe to use it and it seems to be a small performance optimisation.

But if the data changes? I am also wrapping this:

wp.data.select('core').getEntityRecords('taxonomy', "my_taxonomy", {per_page: 100})

in useSelect - because it will be null until loaded. But - and this is the part I do not understand, if I use [] I still get the updated data. (It is null the first time and the actual data the second). So [] does not mean - only run this once. It seems to mean - "do not recreate the function passed as the first param to useSelect" - but if it is still calling that function why would you ever want it to be re-created?

Sorry - probably this is not clear and I am just failing to even grasp the most basic point here - but if anyone can explain to me (probably in fairly simple terms) what is going on, that would be fantastic.

Or at least - when should I use an empty array and when not?

Thanks

2

1 Answer 1

3

But - and this is the part I do not understand, if I use [] I still get the updated data. (It is null the first time and the actual data the second). So [] does not mean - only run this once. It seems to mean - "do not recreate the function passed as the first param to useSelect" - but if it is still calling that function why would you ever want it to be re-created?

You would want the function to be recreated if the function was using a variable that changed. If you had something like this:

const posts = useSelect(
    (select) => {
        return select('core').getEntityRecords('postType', 'post', { author: authorId });
    },
    [],
);

Then the function is using authorId to get the posts from a specific author. Ideally if you change authorId then posts should change to the posts by that author, but because it was not passed as a dependency the function will not be recreated. The original function with the original author ID will continue to be used. So by passing the variable as a dependency the posts will always reflect the correct author:

const posts = useSelect(
    (select) => {
        return select('core').getEntityRecords('postType', 'post', { author: authorId });
    },
    [authorId],
);

If you omitted the [] entirely you would also get the correct posts any time the author changed. The problem is that the function would also run when the author hadn't changed, which is very inefficient.

1
  • thanks for this beautifully clear answer. @Jacob Peattie
    – Kropotkin
    Commented Jul 4, 2023 at 12:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.