Possibility of implementing Custom React Hook that will instantiate a plain JS class only on the client in Nextjs? - reactjs

Question

Question
Is it possible to implement a Custom React Hook that will instantiate a plain JS class only on the client in Nextjs?
The reason it can only be instantiated in the client is because the plain JS class uses sessionStorage, which is NOT available in Nextjs server.
It seems that a graceful implementation would be one of the following:
Instantiate it inside useEffect since that only runs on the client
Instantiate it inside a Custom Hook so the functionality can be shared across components.
Note:
I do not have a clear mental model of the steps React take with rehydration/render using SSR, so do correct me if my explanation is wrong.
References:
https://tech.willhaben.at/how-to-shoot-yourself-in-the-foot-in-react-401e7dbba720
https://joshwcomeau.com/react/the-perils-of-rehydration/
Classes
CheckoutStorage - plain JS class
Address - component using CheckoutStorage
Instantiate it inside a Custom Hook
// A simple class to retrive data from Session Storage.
class CheckoutStorage {
constructor() {
this._address = JSON.parse(sessionStorage.getItem('selectedAddress'))
// ...other class attributes...
}
get address() {
return this._address
}
// prefer function setters instead of having to do "checkoutStorage = something"
setAddress(address) {
sessionStorage.setItem('selectedAddress', address)
this._address = address
}
// ...other functions...
}
export default CheckoutStorage
Address (Function Component) using Custom Hook
Component that will be using CheckoutStorage
// Custom hook that will return an instantiated CheckoutStorage class on client.
const useCheckoutStorage = () => {
const [checkoutStorage, setCheckoutStorage] = useState(null)
useEffect(() => {
setCheckoutStorage(new CheckoutStorage())
}, [])
return checkoutStorage
}
const Address = () => {
// ..other code..
// Defined at the top of the component so other functions can use it.
const checkoutStorage = useCheckoutStorage()
const [addresses, setAddresses] = useState([])
const [selectedAddressId, setSelectedAddressId] = useState(-1)
useEffect(() => {
// Function that makes API call and calls `setAddresses(..)`
fetchAddresses()
// Get previously selected address ID in session storage
setSelectedAddressId(checkoutStorage.address.id)
}, [])
// other code...
return (
<div>...<div>
)
}
Error
Unable to find 'address' of undefined
This refers to the line:
setSelectedAddressId(checkoutStorage.address.id)
We are using checkoutStorage inside the useEffect()
At this point in time, useCheckoutStorage will return null as it's effect has not been executed.
It will only return the instantiated class CheckoutStorage after setting the state in fetchAdddresses()
Working Version of Address instantiating inside useEffect()
const Address = () => {
// ..other code..
// Previous try with a custom hook
// const checkoutStorage = useCheckoutStorage()
const [checkoutStorage, setCheckoutStorage] = useState(null)
const [addresses, setAddresses] = useState([])
const [selectedAddressId, setSelectedAddressId] = useState(-1)
useEffect(() => {
// Added the immediate 2 lines
const checkoutStorage = new CheckoutStorage()
setCheckoutStorage(checkoutStorage)
// Function that makes API call and calls `setAddresses(..)`
fetchAddresses()
// Get previously selected address ID in session storage
setSelectedAddressId(checkoutStorage.address.id)
}, [])
// other code...
return (
<div>...<div>
)
}
The above implementation works, however, if I would like to use checkoutStorage in another component, I would need to do something similar.
So revisiting the question:
Is it possible to implement a Custom React Hook that will instantiate a plain JS class only on the client in Nextjs?
If not, does this implementation makes sense?
Thanks in advance!
Stay Safe. Stay Home. Stay on StackFlow.