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.

CodePudding user response：

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="#"
  
  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);

CodePudding user response：

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

CodePudding user response：

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>
  }
}

CodePudding user response：

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 (i.e. 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