How can I return an undefined value with useMemo? - react-hooks

Question

I'm writing a custom React hook, and sometimes the values returned are undefined, sometimes not.
When I return them, no problems. When I want to return them using useMemo, it doesn't work.
What I'm doing wrong ?
export function useCryptoDevs() {
(...)
const { data } = useContractReads((...))
const numberOfNft = data?.[0]
const maxNft = data?.[1]
const presaleStarted = data?.[2]
const presaleEnded = data?.[3]
// this doesn't work :/
// return (useMemo(() => { numberOfNft, maxNft, presaleStarted, presaleEnded }, [numberOfNft, maxNft, presaleStarted, presaleEnded]))
// this work, returning undefined serverside and the values clientside
return ({ numberOfNft, maxNft, presaleStarted, presaleEnded })
}

Answer 1

Solution
return (useMemo(() => ({ numberOfNft, maxNft, presaleStarted, presaleEnded }), [numberOfNft, maxNft, presaleStarted, presaleEnded]))
Also I would suggest to add some kind of fallback if data are undefined and then check this value if needed, eg.:
const maxNft = data?.[1] || -1 //or some other "extreme" value
Explanation
First of all, good to know is that these two are equivalent:
() => (...) //Implicit return
() => {return ...} //Explicit return
The first parameter in useMemo hook is expected to be a function, so you have three options:
useMemo(function hi() {return "Hello World"})
useMemo(() => ("Hello World"))
useMemo(() => {return "Hello World"})
Parentheses in arrow functions are (mostly) used to return an object (because all primitives and variables are allowed to be used without parentheses, so the black sheep of the family is just the object)
useMemo(() => 8) //implicit return | single-line
useMemo(() => (8)) //implicit return | multi-line
useMemo(() => {return 8}) //explicit return
//instead of 8, there could be any of the primitives, e.g.: string "Hello World"
const foo = 8;
useMemo(() => foo)
useMemo(() => (foo))
useMemo(() => {return foo})
const bar = {intval: 8, strval: "Hello World"};
useMemo(() => bar)
useMemo(() => (bar))
useMemo(() => {return bar})
//we are returning a variable here, not bare object
But to the interpreter the () => { maxNft, numberOfNft } looks like function with explicit return that I mentioned above: () => { return ... }
So you just have to make it clear that it is an object, some specific returned value, not an function with explicit return
useMemo(() => ({ maxNft, numberOfNft }), []) //implicit return of object
useMemo(() => {return { maxNft, numberOfNft }}, []) //explicit return of object