Reactjs - How to avoid creating a new clickhandler function in each render

Question

In my react component on a button click, i am passing a parameter to my click handler exactly like this

<a
            id={`_primaryAction_${messageObject.id}`}
            href="#"
            class='message'
            onClick={(e: MouseEvent) =>
              this.handleClick(e, messageObject)
            }
          >

I have a usecase where my props are changing and re render is happening. so in each new render this click handler new instance will create. Is there a way to avoid this?

Edited: removed id and passing wholeObject as it is my use case. Yes this is in loop. This a tag will create for the array of messages.

Answer 1

First of all, do more research to see if the re-rendering is indeed a cause for concern, as it might not be such a big deal performance-wise.

As a solution, you could create another component which you pass the object.

const ActionLink = (props) => {
  const {
    handleClick,
    messageObject,
    ...otherProps
  } = props;

  const clickHandler = React.useCallback((e: MouseEvent) => {
    handleClick(e, messageObject);
  }, [handleClick, messageObject]);

  return <a 
      {...otherProps}
      onClick={ clickHandler }
    />;
}

export default ActionLink;

And in your case, you can use it like the following ( instead of the a )

<ActionLink
  id={`_primaryAction_${messageObject.id}`}
  href="#"
  class="message"
  messageObject={messageObject}
  handleClick={this.handleClick} >...</ActionLink>

---

And if required, you can further protect against re-renders by passing it through React.memo

export default React.memo(ActionLink);

---

Lastly as an alternative, you could do as others have suggested and provide the id to an attribute of the link, and use that inside the handleClick method to retrieve the correct message from the list

something like

<a
  id={`_primaryAction_${messageObject.id}`}
  href="#"
  class='message'
  data-message-id={messageObject.id}
  onClick={this.handleClick}
>

and in your handleClick

handleClick(e){
   const messageId = e.target.getAttribute('data-message-id');
   // assuming your message list is named messageList
   // adjust accordingly
   const message = messageList.find(({ id }) => id === messageId);

   // ... do what you were already doing with the message here
}

Answer 2

checkout useCallback

useCallback will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders

https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 3

I think you are using a class component

since you want to pass an object which I think is coming dynamically and not some constant in component (ie object is part of a map) and also don't want to create a new function on every render I would suggest set your button attribute's value as the value of your object and you can access it e.target.value and bind the method than using the inline callback

and it will not create a new function now here's the working example

Answer 4

I see you're using class component. In that case, just move the handler into a separate function.

class MyComponent extends React.Component {
  handleClick = (e) => {
    this.deleteRow(id, e)
  }
  render() {
    return <button onClick={this.handleClick}>Delete Row</button>
  }
}