block-components icon indicating copy to clipboard operation
block-components copied to clipboard

Clean up content-search component and re-search when content types change

Open johnwatkins0 opened this issue 2 years ago • 1 comments

Fixes #213

Description of the Change

This makes several changes that will improve the performance of the ContentSearch component and make it behave more predictably. It also modifies the component to account for changes to the contentTypes prop. I think this should just be phase 1 because the component is still too large, and the use of useRef to detect changes to the contentTypes prop is not ideal (component should be rearchitected to handle changes to the prop with effect hooks).

I recommend covering this with tests. I made an attempt but could tell it was going to be a rabbit-hole so didn't stick with it 😄 With the size of this change I would understand holding this until I or someone else can write those tests.

Changes:

  1. Reduce unnecessary renders by (a) moving variables not reliant upon state or props up to the top level of the module, and (b) move some functions to the top level of the module (what were previously useCallback dependencies now passed in as arguments).
  2. Put the mounted ref to use (it was previously never used)
  3. Added fetchedInitialResults state to eliminate the need to ignore the exhaustive deps ESLint rule
  4. Replaced .then Promise syntax with async/await
  5. Wrap some complex logic that was running on every render in a useMemo

How to test the Change

See the test block I shared in #213. A new query should run when you change the content type.

Additionally, some regression testing should be performed with this branch against existing features using the ContentSearch omponent.

Changelog Entry

Clean up ContentSearch component and handle changes to the contentType prop

Credits

Props @johnwatkins0

Checklist:

  • [x] I agree to follow this project's Code of Conduct.
  • [ ] I have updated the documentation accordingly.
  • [ ] I have added tests to cover my change.
  • [ ] All new and existing tests pass.

johnwatkins0 avatar May 24 '23 16:05 johnwatkins0

Size Change: +507 B (+1%)

Total Size: 52.7 kB

Filename Size Change
dist/index.js 52.7 kB +507 B (+1%)

compressed-size-action

github-actions[bot] avatar May 24 '23 16:05 github-actions[bot]

Closing in favor of #326

fabiankaegy avatar Jun 07 '24 11:06 fabiankaegy