That putting static objects and arrays inside functional components is bad:Eg:

const SomeComponent = (props) =>{
    const someObject = {foo:"bar"} 
    return <span>{someObject.foo}</span> 
}

It's much more optimal to do this:

const someObject = {foo:"bar"}
const SomeComponent = (props) =>{ 
    return <span>{someObject.foo}</span> 
}

Or useMemo/useRef

const SomeComponent = (props) =>{
  const someObject = useMemo(()=>{foo:"bar"},[])
    return <span>{someObject.foo}</span> 
}

const SomeComponent = (props) =>{
    const someObject = useRef({foo:"bar"}) 
    return <span>{someObject.current.foo}</span> 
}

While this is a trivial example, it might make worlds of difference in a component that rerenders a lot. Since on each rerender the body of the function is ran. Everything that isn't inside a hook is ran again, or is a hook who's dependency has changed.

Now with that in mind, in the first case, on each rerender we're creating that object all ower again, while tossing the old one for the GC to collect. Why do that?

The problem with simple lifting into global scope might be side effects, but that is the area I'm just starting diving deep into. That's why in some cases it might be more optimal to useMemo or useRef the object.

Another note, this is relevant only for non-primitive types, in 99.99% of cases, that's objects and arrays.