Have I been using `ReactElement` in the correct way?

Question

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?

_"...it would seem as though this is not a "Component" but an "Element"."_ It's a function which _returns_ an element, as the return type makes clear, which is a function-based component. The other kind of component is a class-based component, which has the render method (also returning an element). See e.g. https://beta.reactjs.org/reference/react/Component. — jonrsharpe, Feb 26 '23 at 20:25
[memo](https://beta.reactjs.org/reference/react/memo) is the equivalent of `shouldComponentUpdate` for function components. — Robin Zigmond, Feb 26 '23 at 20:31
First question: use `React.ReactNode` it's very good and its also includes `ReactElement` and Second question: `use React.memo`, let me know if this short answer is ok for you so I can post answer respectively in detail. — Nisharg Shah, Feb 26 '23 at 20:33
@NishargShah @RobinZigmond `memo` is exactly what I'm looking for thanks! I'd love to know more about `React.ReactNode` is possible. I think the ultimate question is, have I gone abotu building my app in the wrong way using `ReactElement`s for all the components. — CafeHey, Feb 26 '23 at 20:58
One way or another you're going to be writing something that returns elements, or you're not going to have much of an app. If you mean function- vs. class-based, see e.g. https://stackoverflow.com/q/61859809/3001761. If you just mean as a return type, see e.g. https://stackoverflow.com/q/58123398/3001761. — jonrsharpe, Feb 26 '23 at 21:04

score 1 · Accepted Answer · answered Feb 26 '23 at 22:00

1

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.

answered Feb 26 '23 at 22:00

Guillaume Brunerie

4,676
3
24
32

score -1 · Answer 2 · answered Feb 26 '23 at 21:07

First Question

React.ReactNode is everything that react 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.

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

Second Question

The answer is React.memo, useMemo, and React.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

Have I been using `ReactElement` in the correct way?

2 Answers2