Using Variable from Props vs Passing Prop as Argument in React

Question

In terms of writing components, which would be the preferred way to write below component? Assume that removeCard is outside of shown scope, ie. redux action.

My assumption would be that ComponentCardB would be, as it avoids passing an unnecessary argument which would be in the scope anyway. I imagine in terms of performance in the grand scheme of things, the difference is negligible, just more of a query in regards to best practise.

TIA

const ComponentCardA = (id) => {
  const handleRemove = (cardId) => {
    removeCard(cardId);
  };

  <div onClick={() => handleRemove(id)} />;
};

const ComponentCardB = (id) => {
  const handleRemove = () => {
    removeCard(id);
  };

  <div onClick={handleRemove} />;
};

In both cases, it would be ({id}) => rather than (id) =>. Your component receives an object with the properties. — T.J. Crowder
– T.J. Crowder, Commented Mar 15, 2021 at 12:29

T.J. Crowder · Accepted Answer · 2021-03-15 12:34:11Z

1

With functional components like that, yes, there's no reason for the extra layer of indirection in ComponentCardA vs ComponentCardB.

Slightly tangential, but related: Depending on what you're passing handleRemove to and whether your component has other props or state, you may want to memoize handleRemove via useCallback or useMemo. The reason is that if other props or state change, your component function will get called again and (with your existing code) will create a new handleRemove function and pass that to the child. That means that the child has to be updated or re-rendered. If the change was unrelated to id, that update/rerender is unnecessary.

But if the component just has id and no other props, there's no point, and if it's just passing it to an HTML element (as opposed to React component), there's also probably no point as updating that element's click handler is a very efficient operation.

answered Mar 15, 2021 at 12:34

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Harry Fry Over a year ago

Ok thanks, makes sense to me. Re. memoization - haven't come across this so will head down that wormhole...

Kishieel · Accepted Answer · 2021-03-15 12:35:45Z

1

The second option is better way because using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.

Also if you don't want to use syntax with props.id you rather create function component with object as parameter:

const Component = ({id}) => { /* ... */ }

Of course using arrow function is also allowed but remember, when you don't have to use them then don't.

edited Mar 15, 2021 at 12:35

answered Mar 15, 2021 at 12:33

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

2 Comments

T.J. Crowder Over a year ago

"...because using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison..." The OP's code creates handleRemove just as often as it would create that arrow function, so that's no more true of the arrow function than it is of handleRemove (though handleRemove is more susceptible to memoization).

Kishieel Over a year ago

In this case, you are right because it is a simple example, but in a larger component with more functions it can make a difference :)

Collectives™ on Stack Overflow

Using Variable from Props vs Passing Prop as Argument in React

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related