function Todos() { const [filter, setFilter] = React.useState('') const { data } = useQuery( ['todos', filter], () => fetchTodos(filter), { // ⬇️ disabled as long as the filter is empty enabled: !!filter } ) return ( <div> // 🚀 applying the filter will enable and execute the query <FiltersForm onApply={setFilter} /> {data && <TodosTable data={data}} /> </div> ) }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter