Call a functional component in React before it is declared

Question

const ShowHide = () => {
   return <Item/>;
};

const Item = () => {
   return(
     //few lines of code
   );
};

Here, the functional component ShowHide calls component 'Item'. Item is an arrow function and it is not hoisted.

How is it possible to call Item before it is declared?

Answer 1

How is it possible to call Item before it is declared?

It's imposible. Read this: javascript variables and temporal dead zone

You can define Item in other file, and imports to file with ShowHide component. It's all what you can do.

Answer 2

Pretty much what ASDFGerte commented.

The following would not work:

 const ShowHide = () => { return Item(); }; console.log(ShowHide()); const Item = () => { return 'hello world' };

Because you are trying to use a const before it's defined and as you can see it won't be hoisted.

The following will work:

 const ShowHide = () => { return Item(); }; const Item = () => { return 'hello world' }; console.log(ShowHide());

Because by the time ShowHide is called and Item is needed it is already defined.