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

Reactjs – Which code structure follows the better render approach?

We have a discussion going on over how to structure the components properly, especially some of which require renders with lists etc.

Which one is a better approach in the following two:

export default function Home() {
  // First approach with returning list outside the 'render' function, and then displaying it inside Render function
  const renderQuickLinksSlides = dummyQuickLinks.map((ql) => (
     <CarouselSlide key={ql.id}>
         <QuickLinkCard fullWidth image={ql.image} href={ql.href} title={ql.title} />
     </CarouselSlide>
  ));

 return (
    <>
        <Container className={classes.bannerContainer}>
            <Section>
            {renderQuickLinksSlides}
            </Section>
        </Container>
    </>
 );
}

or

export default function Home() {
 return (
    <>
        <Container className={classes.bannerContainer}>
            <Section>
            // Directly inside the Render function
            {
              dummyQuickLinks.map((ql) => (
                <CarouselSlide key={ql.id}>
                  <QuickLinkCard fullWidth image={ql.image} href={ql.href} title={ql.title} />
                </CarouselSlide>
              ))
            }
            </Section>
        </Container>
    </>
 );
}

Creating a separate component of course is another option, but what is the way of handling such code structures with simple lists?

Any major differences between the two?

Tags:

2

Answers


  1. 0

    There are no major differences between the two. One difference I see is just, that in the first one you can change the array you are producing programmatically in a function.

    I would say it’s more of a preferences thing. From my experience, I would rather work with the first style, because it’s a bit better to read. If you have many of these it can get quite confusing in the render function. The best way in this scenario, in my opinion, would probably be to put it in its own component. It will help readability and discoverability later on.

    Basically just use the one you are the most comfortable with. 🙂

    Login or Signup to reply.
  2. 0

    Both are doing the exact same thing. So it’s more of a personnal preference.

    But one way to do it better is to memoize the render of the list :

     const renderQuickLinksSlides = useMemo(() => (
   dummyQuickLinks.map((ql) => (
     <CarouselSlide key={ql.id}>
         <QuickLinkCard fullWidth image={ql.image} href={ql.href} title={ql.title} />
     </CarouselSlide>
  ))
), [dummyQuickLinks]);

    useMemo will execute the callback only if one of the values in the dependencies array changes. Otherwise, it will return the last value.

    As render the list require some (tiny) process, it is a best practice to do that.

    I would suggest to never assign a value in a component directly without using a hook in React if the value depends on the state of the component.

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

Back To Top
Search