score:1

Accepted answer

it depends on your button logic, the "rule of thumb" is passing the minimum properties which are necessary:

// jsx
<button
  increasecount={() => props.increasecount(props.title)}
  label="loadmore"
/>

// `title` is not used within the component
const button = props => {
  return <button onclick={props.increasecount}>{props.label}</button>;
};

on the other hand, misuse of unnecessary properties opens opportunities for bugs.

also, there is a use case when you may break your existing component logic.

for example, when your app grows, you may want to change increasecount logic to accept two parameters and not one, you then will need to remember visiting the button implementation and change it accordingly:

// you may misuse the `props.title` 
// and component may break on changing `increasecount` logic
<button
  title={props.title}
  increasecount={props.increasecount}
  label="loadmore"
/>

//              v props.title not used within the component
const button = props => {
  return (
//                                              v notice the bug, `props.label`
//                          v what happens when increasecount logic changes?
    <button onclick={() => props.increasecount(props.label)}>
      {props.label}
    </button>
  );
};

Related Query

More Query from same tag