Getting result of defer/await into local state

[adi3209]

So, I am pretty new to Remix and was trying to understand how defer would work with local state. My use case is as follows:

I have an API which gives me a list of items - I would like to defer this API in the loader and then Await for it. I have this working fine. But I also want the end user to be able to have the ability to search from this list and filter. So when I Await the data and get the results, I am able to show the list the 1st time but how I get the data into a state object so that I can filter and implement type to search on this list.

Here is a piece of the code I have so far:

`

const shouldHideSearch = false
const items = loaderData?.data?.items
const shouldHideSearch = false
const loaderData = useLoaderData<typeof loader>()
const [filteredItems, setFilteredItems] = useState(items)
return (
    <>
        <Suspense fallback={<div>Loading items now....</div>}>
            <Await
                resolve={loaderData.result}
                errorElement={<div>Oops, something wrong with the API!</div>}
            >
                {
                    (result) =>(
                        <>
                            {
                                !shouldHideSearch && (
                                <div className="relative px-4 bg-white">
                                <div>{JSON.stringify(result.data.items)}</div>
                                <ItemComponent items={result.data.items} />. // The result.data.items here -> I need this data to be set to filteredItems 
                                </div>
                                )
                            }
                        </>
                        
                    )
                }
            </Await>
        </Suspense>
    </>
)}

`

In the above sample code - once the await is resolved I receive the data in loaderData.result. How do I get this data inside my local state (filteredItems) so that I can search or filter the results?

Am I just better off using client side rendering with a useEffect instead of using a loader with Defer/Await? Or should I just write a useEffect on loaderData and set the state?

[lili21]

you can use the useAsyncValue hook inside Await children component.

[lili21]

put the filteredItems inside Await instead.