Once we add the useConnect hook, here are some ideas for other custom hooks that might improve productivity.

Add a usePageData react hook to make it easy to get the data for the current link.

function usePageData(){
 const { state } = useConnect()
 const data = state.source.get(state.router.link)
 return data
}

Add a usePostData react hook to format the post data in a way that makes it easy to consume

function usePostData(){
 const {state} = useConnect()
 const {id, type} = usePageData()
 const post = state.source[type][id]

 // a custom function to format the data
 const formattedPost = format(post)

 return formattedPost
}

// The final structure will look like
const result = {
 id: 3, 
 author: {}, // all author data,
 publishDate: "", // date the post was published
 title: "", // the "rendered" part of the title
 categories: [], // a list of all categories data,
 tags: [], // a list of all tags data,
 link: "", // the url of the post,
 featuredMedia: {}, // all featured media attributes (src, srcSet, etc.)
 content: "", // the "rendered" part of the content
 excerpt: "", // the excerpt of the post
 ...rest, // any other data
}

Add a useMedia hook to get the props for any featured media

function useMedia(id){
 const {state} = useConnect()
 const media = state.source.attachment[id]
 
 if(!media) return null
 
 // function that resolves the media object and extracts the srcSet
 const srcSet = getSrcSet(media)

 const result = {
  alt: media.title.rendered,
  src: media.source_url,
  srcSet
 }
 
 return result
}

// This can be consumed in any media related component

Add a simple helper to format post dates to a human readable format. Using toLocaleString doesn't create a complete readable date.

function formatPostDate(post){
 const date = new Date(post.date)
 const day = date.getDate()

 const month = date.getMonth() + 1,
 const monthName = getMonthName(month)

 const year = date.getFullYear()

 return {day, month, monthName, year}
}

// We'll return an object so users can format the date anyhow they want

Add a useRouter hook that exposes the properties and methods from the router. Ideally, it can also expose listeners for the route changes.

function useRouter(){
 const {state, actions} = useConnect()

 // Custom route change listener so users can so some stuff
 const onRouteChange = (prevUrl, url) => {
  // 1. like close a mobile menu
  // 2. show a promotion popup if you're coming from a particular url
 }
 
 // I know we currently have a set method, i'd like to see if we can add a query params 
 const set = (url, params) => {
 }
 
 // return all router actions, properties, and listeners
 return {}
}

// so if i'm in a search modal, and I need to trigger a search
const router = useRouter()
const onSubmit = () => {
 // url here is the current page url
 router.set(router.url, {s: "testing"})
}

Add a useSearch hook to help users create easy search forms for their website or blog. This hook returns valid HTML props that can be spread unto the form and input elements.

function useSearch(onComplete){
 const {state, actions } = useConnect()

 // get the current page query
 const router = useRouter()
 const searchQuery = router.query["s"]
 
 const inputRef = React.useRef(null)

 const handleSubmit = event => {
  event.preventDefault()

  // get the input's value
  const inputValue = inputRef.current.value
  
  // set the router url
  if(inputValue.length){
    router.set(router.url, {s: inputValue})
  }

  // scroll the page to the top
  window.scrollTo(0, 0);

  // function to run after search
  // users could close any opened modal or call some notifier
  if(onComplete) onComplete()
  
 }

 const formProps = {
  role : "search",
  "aria-label": "Search this website",
  onSubmit: handleSubmit
 }

 const inputProps = {
  defaultValue: searchQuery,
  ref: inputRef
 }

 return { formProps, inputProps }
}