creating react functional components inside other components or in a separate file

Question

Can someone explain to me why i find this pattern in a code base.

import React, { useState, useEffect } from "react";

const ParentFC= props => {
    
    const renderChild = (childInfo) => {
        // some component created here 
        return <></>
    };


    return (
        <div>
            <ul>
                {props.childinfos.map(renderChild)}
            </ul>
        </div>
    );
};

export default ParentFC;

for me this seems very inefficient as it will recreate the function on each re-render, however the codebase uses this pattern often. Can someone confirm that this is inefficient or is there a reason to create functional components inside functional components like this instead of in a separate file.

Answer 1

Function Components vs Functions that Return JSX

First, notice that renderChild is not a function component, it's just a function that returns JSX. This is important because it means the function cannot use hooks, and that React cannot perform some of it's re-render optimizations on it like it could a component.

You can spot the difference a few ways. A component has a capital first letter, and is used with JSX syntax: <MyComponent/> (or React.createElement calls). Functions that just return JSX are used as normal functions: myFunction(). The latter is what is happening here when you pass it to map.

Defining Components within Components

As far as defining components within components: it isn't just inefficient, its an anti-pattern and will lead to bugs with the component lifecycle if the component has any level of complexity to it.

---

All that said, unless you are observing a performance issue that you can link to this pattern, it's probably fine to leave it. The function is not complex, so unless its getting called a substantial amount of times, there's not really that much overhead involved with the function calls.

Takeaways

If you are defining a function like this within another component, it should always be a normal function that returns JSX, not a true component. This will save you from future problems.

If your function has a requirement for state or other component lifecycle functionality, it should be moved into its own file or at least outside of the current component.

Re-defining things each render is less efficient than not (obviously), but most times it's not enough to ever notice.

Answer 2

This does seem inefficient indeed, but for readabilitys sake, it might also have some advantages. Sometimes the child component might contain some conditional code that isn't based on props but rather some of the parent props or variables (though dependant variables should always be passed as props to a component, in my opinion). In most cases, it is most likely due to the smaller size of the child component. If the child component only contains one or two lines of code for the rendering, it might be excessive to put it into a completely separate file.

The ineffeficeny of the component being redefined in each render can easily be mitigated by the use of React Hooks like React.useMemo, to prevent it from being redefined each time the parent re-renders.