I wonder if it OK to define the Elements outside of the components. Just something like this

const Element = <Component/>


const App = () => {

return <MemoizedParentComponent>{Element}</MemoizedParentComponent/>

}

So, the reason why I would like to do it is because MemoizedParentComponent uses React.memo under the hood and if we pass <Component/> as children prop directly, it causes the rerender whenever the App component is rendered (if it has some states for example).

So basically, as I see there are two options to support normal memorization:

1. define Element in useMemo inside the App component
2. define it outside of the App component like in the example above.

Are there any potential risks in defining the element outside of the component or it’s a legit option?