What does a ReactFragment from "react" mean?

730 Views Asked by At

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.

3

There are 3 best solutions below

0
zmag On BEST ANSWER

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.
2
Pramod Mali On

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

0
Ioannis Potouridis On

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.