DEV Community

Cover image for A react optimization that takes 2 minutes to implement
Abhinav Sachdeva
Abhinav Sachdeva

Posted on โ€ข Edited on

6

A react optimization that takes 2 minutes to implement

Our applications usually have a list component (which one doesn't?), even the todo apps have it, right?
There's a good proabability that something happens when the user clicks on a list item. There's also a good probabilty that the handler is not implemented the "right" way.

const handleClick = (item) => { }
return <div className="listContainer">
    <ul>
    {
      data.map((item,idx) => (
        <li key={idx} onClick={() => handleClick(item)}>{item}</li>
      ))
    }
    </ul>
  </div>;
Enter fullscreen mode Exit fullscreen mode

Maybe you've already guessed it, we're attaching a new function to each list item. And what's more, it happens on each render!

We can make use of event bubbling here to fire a common handler for every list item.

Here's how to refactor :

  • Remove the onClick from the list.
  • The handler function would now receive the item index instead of the entire item, so we need to refactor any code inside the handler assuming we have access to the index, not the array element.
  • Attach a data attribute to each list item while rendering. Thee value of this attribute would be the array item index (or even any property from inside of the item itself!).
  • Attach an onClick to the parent of the list items, it could be the parent at any level.

Here's how our code looks after the refactor:

const handleClick = (item) => {console.log(item)}
return <div className="listContainer">
    <ul onClick={(e) => handleClick(e.target.dataset.id)}>
    {
      data.map((item,idx) => (
        <li key={idx} data-id={idx}>{item}</li>
      ))
    }
    </ul>
  </div>;
Enter fullscreen mode Exit fullscreen mode

This didn't take too long but benefit get big especially with larger lists.

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series ๐Ÿ“บ

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series ๐Ÿ‘€

Watch the Youtube series

๐Ÿ‘‹ Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay