Question 320466 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Is it bad practice to split JSX elements into multiple function components in React?

I have multiple components like :

import { memo } from "react";
import { ErrorBoundary } from "react-error-boundary";

import { ChildComponent } from "../../ChildComponent";
import MainComponentFallback from "../../MainComponentFallback";

type Props = {
  id: string,
};

const MainComponent = (props: Props) => {
  const { id } = props;

  const MainComponentBody = () => {
    return <span> component id is : {id} </span>;
  };

  return (
    <div>
      <ErrorBoundary FallbackComponent={MainComponentFallback}>
        <MainComponentBody />
      </ErrorBoundary>
      <ChildComponent id={id} />
    </div>
  );
};

export default memo(MainComponent, isEqual);

Right now there are many separated component files created for different parts of the MainComponent (like ChildComponent) and I prefer not to add another one.

Also, this is the main part of my component and I think it’s better to have it inside the current file rather than moving it to another file.

And The reason I’m adding the MainComponentBody function is that the react-error-boundary only gets aware of and catches nested UI component render errors in this way.

So my question is:
Is it anti-pattern or does it have any performance impact to structure my components like this?
(I should note that the MainComponentBody uses the MainComponent props cause it’s inside the MainComponent & has access to the props)

Tags:

2

Answers


  1. 0

    this is the main point of these frameworks, to make code splitting easier.

    However in your example the child component declaration should not be inside the main component and usually you’ll want to split that into it’s own file once it gets too big.

    A good rule of thumb that many businesses follow is 500 lines per file, it’s also popular to split out logic out to a "hook" with the naming convention use[MyUtilName].

    const useSomething () => { 
    const something = 'something' 
    return { something } 
}

const MainComponentBody = (props: Props) => { return <> MainComponentBody </> }

const ChildComponent = (props: Props) => { return <> ChildComponent </> }

const MainComponent = (props: Props) => {
    const { something } = useSomething()

    return { 
      <>
          { something }
          <MainComponentBody />
          <ChildComponent  />
      </> 
    }
}
    Login or Signup to reply.
  2. 0

    Splitting JSX elements into multiple function components in React is generally considered a good practice. It’s part of the component-based architecture in React, promoting code readability, maintainability, and reusability. Breaking down your components into smaller, focused functions enhances the overall structure of your code and makes it easier to understand.

    In your example, extracting MainComponentBody into a separate function is a valid approach, especially if you have a portion of your JSX that’s responsible for rendering a specific part of your component. This can improve the clarity of your code and make it easier to reason about each part of your component independently.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search