DEV Community

Helder Burato Berto
Helder Burato Berto

Posted on • Edited on • Originally published at helderberto.com

ReactJS Tips & Tricks: Avoid Nested Render Functions

#react #javascript #webdev #frontend

A common thing I noticed in a lot of projects I worked on is the Nested Render Functions approach to render UI elements.

Let's dive into this approach and how to change in a better way.

What are Nested Render Functions?

Basically, it is when you declare a part of UI render in a function inside of a component, such as:

const Component = () => {
  function renderSection() {
    return <section>This is my section.</section>
  }

  return (
    <div>
      {renderSection()}
      ...
    </div>
  )
}
Enter fullscreen mode Exit fullscreen mode

Since components are just functions, it is the same as declaring new components inside the current Component.

Extracting to a New Component

It is much better to extract to a new component, it will help you to create unit tests more easily and isolated to the component.

Let's re-create the example I mentioned before, like the following:

const Section = () => <section>This is my section.</section>

const Component = () => (
  <div>
    <Section />
    ...
  </div>
)
Enter fullscreen mode Exit fullscreen mode

Instead of using closures, now you have a pure function for Section component, that's more readable and easy to give their props.

Wrapping Up

With this approach, you will create more deterministic components taking the benefit of React pure component.

It will help you to test the component and create isolated behaviour for every component.

Top comments (5)

Collapse
 
sush_5191 profile image
Sushant Garudkar •

Loved the post!!

Collapse
 
helderberto profile image
Helder Burato Berto •

I'm glad you liked it.

Collapse
 
ebitzu profile image
eBitzu • • Edited

I think you should explain why it's not ok, starting with the unnecessary creation on each re-render, which in fact triggers the returnComponent to re-render every time the Component re-renders.

Collapse
 
delciopolanco profile image
Delcio Polanco •

Do you recommend do this also for handlers events functions ?

Collapse
 
helderberto profile image
Helder Burato Berto •

If you are talking about cases like this:

const Component = ({ onClick }) => {
  const handleClick = () => {
    onClick();
  }

  return <button onClick={handleClick}>Click me!</button>;
}
Enter fullscreen mode Exit fullscreen mode

IMO, it's totally unnecessary the handleClick if it is just to trigger the onClick, but if you have some logic to to before trigger the onClick, it make sense to stay there.

Read next

garciadiazjaime profile image

React: LinkedIn Access Token in 10 Steps

Jaime -

soheilyr profile image

Class variance authority: A Game changer for Tailwind UI components (NEXT.JS)

Soheil yazdanyar -

biswajitfsd profile image

Mastering REST API Best Practices in Python 🐍

Biswajit Patra -

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -