skip to Main Content

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


  1. 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

    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search