CODEWITHSUNDEEP
reactjstypescriptreact-fragment
NIV
NIV

Reputation: 486

What does a ReactFragment from "react" mean?

I was looking through a .tsx code that looked something like below.

import React, { Fragment, ReactFragment } from "react";

// ...
export interface PageProps {
   children: ReactFragment;
   commandBar: reactFragment;
   // ...
}
    
export default page(props: PageProps) {
   return(
      <Fragment>
        // ...
      </Fragment>
   );
}

I roughly know what a React.Fragment is.
We can use either <></> or <React.Fragment></React.Fragment> or <Fragment></Fragment> based on the import sugaring, to group react elements.

So, my question is how does ReactFragment work here?
Is it just to indicate that children or commandBar is of a React.Fragment type?

In that case, why not use React.Fragment itself? Googling throwed results for React.Fragment only.

Upvotes: 3

Views: 892

Answers (3)

Ioannis Potouridis
Ioannis Potouridis

Reputation: 1316

ReactFragment is a type (e.g. ReactNode can also be a ReactFragment) where Fragment is the pattern in react that lets you return grouped children.

Upvotes: 1

Pramod Mali
Pramod Mali

Reputation: 1798

See the below screenshot.

enter image description here

ReactFragment is one of the valid values for ReactNode which intern can be Array<ReactNode> so you can have a valid return as ReactFragment i.e. <></> or <React.Fragment></React.Fragment> for your component.

import React, { ReactFragment } from 'react';

function MyComp(): ReactFragment {
    //it can return any of boolean, null, undefined, ReactChild, ReactFragment
    return (
        <></> 
    )
}

Here we specifically define the type to be a ReactFragment. Even if you return boolean, null, undefined, ReactChild, ReactFragment it will accept as it extends Array<ReactNode>.

In nutshell ReactFragment is a type that a component can return.

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L238

Upvotes: 1

zmag
zmag

Reputation: 8241

Is it just to indicate that children or commandBar is of a React.Fragment type?

Yes.

In that case, why not use React.Fragment itself?

React.Fragment is not a type but a value. If you used it, you will see an compile error like this:

'Fragment' refers to a value, but is being used as a type here.

Upvotes: 2

Related Questions