I’ve built an app with "components" that all begin like this:
export const SomeComponent = (props: SomeComponentProps): React.ReactElement => {
return (
<>
<div>some content</div>
</>
)
}
However now I’ve been Googling and it would seem as though this is not a "component" but an "element".
I’m having some difficulty telling if I’ve built my app correctly, all of my TSX/JSX files are set up like this and use "ReactElement" but an lot of results on the web show me things called "components" with a render method in them.
Should all of my components/elements in my app start with React.ReactElement
or have I done this entirely wrong?
2
Answers
First Question
React.ReactNode
is everything thatreact
can offer. It can be string, number, boolean, null, undefined, fragment, portal, ReactElement, or an array of the ReactNode.so If you look into the type of
ReactNode
, it will look something like below.Second Question
The answer is
React.memo
,useMemo
, andReact.memo
is different so please take note of it.No one can explain you more than docs, please refer new doc: https://beta.reactjs.org/reference/react/memo
There is no need to type the return type of React components. So just remove the
: React.ReactElement
part and you’re good to go.