---
# System prepended metadata

title: Front End Patterns

---

---
v3
---

# Front End Patterns


## Hooks
- **useList()**: 
    - We have a lot of lists in the app. We spend a lot of time rewriting the functionality of lists. 
    - All of these lists need to store an array of items in state. They store a single filter string and/or sort in state. 
    - They store a static collection (usually object) of filter and/or sort fns along with the names of these functions for display in the filter and sort select. 
    - Does search as well
    - Displays backup UI when there's no results
    - Easy to debug modifiers(filters, sorts, etc)
    - In V3, it's likely that filter and sort may also be contstructing a query and returning results instead of actually filtering or sorting on the front end, so it will also need to handle synchronous and asynchonous operations. 
    - All sorts, fetches, filters follow a common model. 
    - Designs should reflect this commonality as well. Just as it does in V2 (Playlists, marketplace, explore, proposals, members, etc) 
    ex
    ```js 
    const filters = {
  IPFS: { fn: doc => isIPFS(doc) && !isRatified(doc), name: 'IPFS' },
  onchain: {
    fn: doc => isEncoded(doc?.contentType) && !isRatified(doc),
    name: 'On Chain',
  },
  ratified: { fn: doc => isRatified(doc), name: 'Ratified' },
    ```  
    - Same List Model helps us build lists for different styles, ex. Cards or ListItems
    - This should work hand-in-hand with a list style component macro, ex. 
```js
    <List
       listItems={Array}
       fetchItems={AsyncFn}
       filters={ObjectOfFilterFns}
       sorts={ObjectOfSearchFns}
       search={Boolean}
       style={Enum('cards', listItems, etc)}
       
    />
```
    
    

    

## Fetching

## State Management

## 

## Library

