Advanced React Hook Patterns You Should Know

1// Usage: Flexible and composable
2<Select>
3  <Select.Trigger>Choose option</Select.Trigger>
4  <Select.Content>
5    <Select.Item value="a">Option A</Select.Item>
6    <Select.Item value="b">Option B</Select.Item>
7  </Select.Content>
8</Select>

1class="text-category-tech font-medium">function useQuery<T>(key: string, fetcher: () => Promise<T>) {
2  class="text-category-tech font-medium">const [state, setState] = useState<{
3    data?: T
4    error?: Error
5    isLoading: boolean
6  }>({ isLoading: true })
7
8  useEffect(() => {
9    fetcher()
10      .then(data => setState({ data, isLoading: false }))
11      .catch(error => setState({ error, isLoading: false }))
12  }, [key])
13
14  class="text-category-tech font-medium">return state
15}