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?

`ShowHide` is called after `Item` is defined, and javascript doesn't care otherwise. Tl;dr; `const f = () => x; const x = 'something';` doesn't throw, but `const f = () => x; f(); const x = 'something';` does. — ASDFGerte, Mar 08 '21 at 18:46
Does this answer your question? [What is the temporal dead zone?](https://stackoverflow.com/questions/33198849/what-is-the-temporal-dead-zone) — Jared Smith, Mar 08 '21 at 18:46
You could just use `function` instead of arrow functions assigned to `const` variables. — crashmstr, Mar 08 '21 at 18:51
Thanks for the response.How is ShowHide called after Item definition? — Yearn2Learn, Mar 08 '21 at 18:52
In your code, it is actually never called, but obvious, that it won't be called before `Item` is defined. — ASDFGerte, Mar 08 '21 at 18:53

score 0 · Answer 1 · answered Mar 08 '21 at 19:00

0

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

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

answered Mar 08 '21 at 19:00

FXX058

Yes it works, and reason is ShowHide is called after Item is defined – Yearn2Learn Mar 08 '21 at 19:08

score 0 · Answer 2 · answered Mar 08 '21 at 19:25

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.

Thankyou. The code snippet is used in React and 'Showhide' is exported to app.js.I am not sure how the execution of 'ShowHide' happens in app.js after defining 'Item'.Appreciate your help. — Yearn2Learn, Mar 09 '21 at 04:36

2 Answers2