Setter & getter separation (useQueryValue & useSetQuery)

[lamualfa]

This setter & getter separation concept is inspired by useAtomValue & useSetAtom from jotai (state management library). This separation will add more granular and semantical support for the user.

Functions

• useQueryValue
• useSetQuery
• useQueryValues
• useSetQueries

Use Cases

• Component that only uses the query value without changing it (useQueryValue & useQueryValues)
  • To determine which tag is active on the article page
  • To generate a share URL when the share button is clicked
• Component that only changes the query value without using it (useQueryValues & useSetQueries)
  • To set the query values after submitting a form
  • To reset the query values when the reset button is clicked

---

useQueryState & useQueryStates are still exist and used on the component that needs to read & write the query at the same time likes the search filter.

---

Thanks 🌟.

[franky47]

You can do this trivially with the existing API:

// Read-only
const [value] = useQueryState('key')

// Write-only
const [, setValue] = useQueryState('key')

Since all hooks with the same key are synced together, you can separate read and write without any issues. The state updater function is also referentially stable across renders.

If you really want to abstract those into functions:

function useQueryValue() {
  return useQueryState('key')[0]
}

function useSetQuery() {
  return useQueryState('key')[1]
}

[Thiago-cpu]

But if you are just setting the state it would rerender no matter if you are using the state or not, right ?