How to set selected value from select element

[aliakbarazizi]

I'm little confused about how to do this in react-query because of background refetch.

I have a select that user can select list of Person, this list is coming from server
So my code is something like this

const {data} = useQuery(...) // fetch data from server
const [selectedItems, setSelectedItems] = useState([]);


return <div>
...
<Select options={data} selected={selectedItems} onChange={(selected)=>setSelectedItems(selected)} />
...
</div>

This is working great until one of item in the list get changed and react-query tries to refetch it. for example one item in selected item is deleted.

I need to change my selectedItems in useEffect when data changed. But I'm wondering is there any simple approach to this?

[TkDodo]

what you need to do is dynamically compute the selected items instead of keeping everything in state. The state only shows what the user has selected, but you can derive something from that during render:

const {data} = useQuery(...) // fetch data from server
const [selectedItems, setSelectedItems] = useState([]);

// here, you filter out items that have been deleted for example
const reallySelectedItems = computeReallySelectedItems(selectedItems, data)

<Select options={data} selected={reallySelectedItems} onChange={(selected)=>setSelectedItems(selected)} />

[aliakbarazizi]

I see, I think it's not react query, but before using it there wasn't any background refetching
Thank you.
It shouldn't be any useEffect and compute selected when data changed?

[TkDodo]

shouldn't be any useEffect and compute selected when data changed?

Nope. See: https://tkdodo.eu/blog/dont-over-use-state