Refactor: useMemo on elements and useCallback is back on resetAllFilter

[USERSATOSHI]

What?

Follow up PR based on #78048 (review)

Performance optimization: wrap elements array and resetAllFilter callback in memoization hooks to prevent unnecessary recreations on every render.

Why?

The elements array was being recreated on every render, and resetAllFilter was being recreated whenever elements changed. This causes unnecessary re-renders of dependent UI components. Memoizing both ensures they only update when their actual dependencies change.

How?

• Hoisted useHasCaptionPanel, useHasButtonPanel, and useHasHeadingPanel hook calls to the component top level (they can't be called inside useMemo)
• Wrapped elements in useMemo with dependency array [ showCaptionPanel, showButtonPanel, showHeadingPanel ]
• Wrapped resetAllFilter in useCallback with dependency array [ elements ]

Use of AI Tools

None

[USERSATOSHI]

cc: @ciampo

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: USERSATOSHI <tusharbharti@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Mamaduka]

Are there any visible wins for this memoization, or is it just theoretical? Is it expensive to recreate these values?

[ciampo]

@Mamaduka actually has a point. The memoization doesn't really seem to bring concrete advantages:

• the objects / functions being memoized are simple to re-recreate
• the immediate consumer (ie. ColorToolsPanel) wraps that resetAllFilter function in a new, un-memoized callback anyway
• the receiver component is not wrapper in React.memo
• the underlying ToolsPanelItem component explicitly discards that stability (see code)

With that in mind, there is still one part of this PR that is a nice improvement, ie. hoisting the use*Panel calls

const showCaptionPanel = useHasCaptionPanel( settings );
const showButtonPanel = useHasButtonPanel( settings );
const showHeadingPanel = useHasHeadingPanel( settings );

We could either close this PR entirely, or keep it with only these minor changes.

@Mamaduka @USERSATOSHI , do you have a preference?

[Mamaduka]

Yes, let’s keep panel status vars and discard memorization.

[USERSATOSHI]

@USERSATOSHI , do you have a preference?

The only reason I shared this issue was that the warning message was bugging me every time I edited that file. 😅

[ciampo]

🚀