DEV Community

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...

Read full post

Wallace Ferreira • Apr 20 '22

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);
}

Crush-star • Jan 17 '23 • 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()}
  )

Crush-star • Jan 17 '23

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

Manikanta prasad • Apr 5 • 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

SIYUAN YANG • Aug 19 '21

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.

Igor Bykov • Aug 19 '21

Glad it helped 👍

Madhur Garg • Dec 2 '22 • 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>
);
}

Igor Bykov • Dec 3 '22

Certainly the state will not work in any meaningful way

codeCopier • Oct 1 '21 • 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 />
                </>
            )})()
        }
      ...
    )