DEV Community

Cover image for React: Calling functional components as functions

React: Calling functional components as functions

Igor Bykov on August 26, 2020

TL;DR To be a component ≠ Return JSX <Component /> ≠ Component() Note: This article tries to explain a somewhat advanced concept. One of...
Collapse
 
wallacesf profile image
Wallace Ferreira

Another alternative i found is the following:

// MyComponentWrapper.jsx
import React from 'react';

export const MyComponentWrapper = (props) => {
  const myComponent =
   React.useMemo(() => getMyComponent(props.type), [props.type])

 return React.createElement(myComponent, props);
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
crushstar profile image
Crush-star • Edited

Why using useState in a function is valid.
eg.

  const [state, setstate] = useState(0);

  const fun = () => {
    const [a, seta] = useState(0);
    useEffect(() => {
      seta(a + 1);
    }, [state]);
    return <div>{a}</div>;
  };

  return (
    {fun()}
  )
Enter fullscreen mode Exit fullscreen mode
Collapse
 
crushstar profile image
Crush-star

When the state changes and re-renders, the aa function is indeed the latest value

Collapse
 
manimestro profile image
Manikanta prasad • Edited

usestate hook are used by react to memorize something .. in order to work that hook should be called by react itself ..not you .. so when react calls it.. it will get an object with the info of current component and react will go find where the shelf is and get the memorized value

Collapse
 
henryyangs profile image
SIYUAN YANG

AMAZING! I met exactly the same bug yesterday, and fixed it by accident changing <Component /> to {Component()}, then found this article this morning. Thanks for your article and help me to understand.

Collapse
 
igor_bykov profile image
Igor Bykov

Glad it helped 👍

Collapse
 
_madhurgarg profile image
Madhur Garg • Edited

What if the text component contains it's own state as well? As you said in case of function call react doesn't know about the existence of text function? What will happen to the state?

const HelloWorld = () => {
const text = () => {
const [value, setValue] = useState('hello')
return 'Hello, World';
}

return (
<h2>{text()}</h2>
);
}

Collapse
 
igor_bykov profile image
Igor Bykov

Certainly the state will not work in any meaningful way

Collapse
 
codecopier profile image
codeCopier • Edited

Deep and eye-opening article! Thanks.
P.S. This article indirectly helped me figure out my problem with HOC: I needed to wrapped multiple components inside a HOC and render the result. and all of these are inside another component's return.

After reading this, I realized HOC is a function that get another function declaration as argument. So I needed to do something like this to get the results:

...
 return (
        ...
        {
            myHOC(() => {return (
                <>
                <MyComp1 />
                <MyComp2 />
                <MyComp3 />
                </>
            )})()
        }
      ...
    )
Enter fullscreen mode Exit fullscreen mode
Collapse
 
krankj profile image
Sudarshan K J • Edited

Nice article! Thanks for the deep dive.

Collapse
 
heitian_boyi profile image
vpokrityuk

Amazing article. Thanks

Collapse
 
shivraj97 profile image
Shivraj97

One of the best article I have read on React.

Collapse
 
igor_bykov profile image
Igor Bykov

Hey, so glad you liked it :)

Collapse
 
theashishmaurya profile image
Ashish maurya

I came accross similar bug but after reading your articles, i totally understood why its happening . GOOD WORK BUDDY.

Collapse
 
igor_bykov profile image
Igor Bykov

Thank you :)