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>
);
};
Source: stackoverflow.com
Related Query
- Preferred style for passing props to components
- Create a method for passing props to components in REACT
- React select passing props for components to useMemo
- Passing functions in ReactJS as props for components
- React: Passing down props to functional components
- How to extend props for Material-UI components using Typescript?
- React memo components and re-render when passing function as props
- Multiple Props Options for Styled Components
- How to pass style props for a specific component in react-native
- Connecting child components to store vs connecting parent component to store and passing down props
- Typescript & React: Passing props between components vs default props
- How to type the style property for components to accept arrays?
- Use of Context API vs CloneElement for passing down props for direct descendent
- What is the reason for passing props to super() in a React constructor when props aren't accessed within it?
- passing a type argument for the props of a react component for a higher order component
- React Native: Passing props between components and componentWillMount() method
- Passing props to children components with react-router v4
- React - Passing fetched data from API as props to components
- React props for passing color
- Passing an array of Components as a Props in React
- Passing Props between components
- styled components - passing props to GlobalStyle
- Avoid passing down props using Styled Components and Typescript
- React - functional components keep re-render when passing functions as props
- react how to pass props to inline css style in components
- Passing props to sub components Reactjs
- Passing props to child components in es6
- router props and custom props with typescript react router dom for functional components
- What is the better way for passing props to component in React?
- Syntax for passing props to stateless component
More Query from same tag
- Making React.FC global in Typescript
- Prevent top scroll after update state
- How to get a user input value and display another element based on that in React?
- How to optimize SEO for SPA using React-Helmet?
- Migrating from Redux to Redux toolkit
- Modifying static property of a component doesn't re-render all of its instances in React
- Getting Typescript Error while adding object to array using useState in React
- Am I over-nesting in JavaScript Async/Await
- Updating the state of an array after search reactjs
- How to trigger FileReader's `onloadend` in unit tests?
- How can I render different data from a single react component?
- How can I copy the state in react without reference?
- Redux-Observable: modify state and trigger follow up action
- Invalid hook call when trying to fetch data using useCallback
- Why use the JavaScript spread operator to update an item in an array?
- React.js Failed to compile: unexpected token
- ES6 best way to import React's named imports
- How can I destructure a mixture of React props and my custom props?
- Can't display product name, price,etc in productdetails
- React Manage Multiple Audios on Same Page and play one at a time using function based components
- Render array of objects React
- Update state using function .map() is mutated state?
- How to return a list of react components
- react-beautiful-dnd throws error when ordering the second time
- Class name hydration mismatch in server and client, (Warning: Prop `className` did not match Server and Client)
- How to add jsconfig.json to existing vscode project w/o breaking it
- Can't import SVG in Gatsby TypeScript Project - Element type is invalid: expected a string
- Getting client side routing working with Shopify app-bridge-react
- store state of dynamic component in reactjs application
- Nodejs + mySQL data does not get sent to my database