Knowledge Explorer Step 10: Extract the Search

Pull the whole search lifecycle out of your component and into a hook called useSearch, taking a query and returning the items, loading and error. The component should end up short enough to read in one glance: call the hook, then decide what to render from what it returns. Extract useDebounced as its own hook too, and have useSearch call it. If the component still has a fetch in it when you are done, the extraction is not finished.