I have a React component with many props (13 props and 9 event handle props) to pass to this component:
<MyComponent
prop1={prop1}
...etc...
prop13={props13}
onEventProps1={handleEventProps1}
...etc...
onEventProps9={handleEventProps9}
/>
It doesn't have clean code and maintaining or reading the code is a disaster for me. So what is the most efficient way in my case to improve aesthetic for component props?
First, I strongly suggest you do not pass a lot of props simply because you make things more complex. But if you did that the solution I have is to first create an object. The keys of that Object would be the name of the props you have and the values would be the values you want to pass as your props. and then pass that object to your component. It would be basically something like this:
const propObject = {
firstProp: firstValue,
secondProp: secondValue,
...}
<Component {...propObject} />
You can use this method to pass your props in a cleaner way.
Related
I want to pass my props right to my children's component.
I don't want to pass them to children and then to a decomposition component. I want to make it easier and faster.
I wondered, is it okay if I pass my props this way? Everything works as intended.
Or do I break some unknown for me rules? If I break them what can happen otherwise? If I don't break them and it's the bad approach anyway, please, explain to me why?
export function ParentComponent() {
const [myProp, setMyProp] = useState(false);
return (
<div>
<ChildrenComponent>
// Nested component gets props right here
<DecompositionComponent myProp={myProp} setMyProp={setMyProp} />
</ChildrenComponent>
</div>
);
Link to a code
P.S. I know about "render props" and useContext.
This is a perfectly valid way of sending props to components with component composition. It's also a powerful pattern to use as it can make your components more reusable, and you avoid deep prop drilling.
I still don't get why we need a prop(s) in react, seriously. Why can't we just declare everything we need as an argument or parameter in the child component, then declare it, why do we have to declare it in a parent element then pass the props to the child component then catch it. I don't understand why. It seems a bit confusing, I'm yet to see the why in it
Props are useful in the case that you have a controller in the parent component and you want to pass the value of that controller to the child to make a certain action. The replacement for props would be to store everything globally in redux or mobx, but that needs much work. for example
const ParentComponent = () =>{
const [flag, setFlag] = useState(false)
return(
<div>
<button onClick={()=>setFlag(!flag)}>click me!</button>
<ChildComponent flagValue={flag}/>
</div>
)
}
as in the example for some reason the button that changes the flag is in the parent and you need to use that value in the ChildComponent. So here you benefit a lot from using props.
Also in writing a cleaner code and drier one so as not to repeat the same values in different react components
You might not be familiar with React if you ask such questions (no anger at all). It's one of the main concepts of the React library.
You can easily split a huge component into smaller pieces. But then, you need to provide the same data here and there. To prevent repeating yourself (DRY - don't repeat yourself), you can share the prop with many child components.
If you are interested in React - check the documentation.
It's one of the prettiest documentation I've ever read.
prop changes trigger UI re-render for the child component.
That's one of the props of using props.
Let's say I want the consumer of my component to give me this props:
<MyComponent
firstProp='first value'
secondProp='second value'
/>
And I have an internal state inside my component, called firstProp.
I know I can either change the name of the internal state, or change the prop name.
But this is a simple example. In reality in our codebase we have a huge dependency and hierarchy of components and it's not easy for us to change names.
I wonder if it's possible that I change the name of firstProp I recieve in my component to something else?
in your consumer component :
const {firstProp:yourPrefferedName} = props
I have several React components put together in a chain that looks something like this:
Dashboard->CallScreen->CallControls->AddressingPopup
There is functionality that I want to use from the Dashboard component inside of AddressingPopup. I've tried passing props through all the children using {...this.props} which doesn't let me access the state it seems.
How can I pass EVERYTHING down the chain to AddressingPopup?
When passing props down into a React component I am currently of doing this:
<MyComponent
{...this.props}
foo=foo
bar=bar
/>
foo and bar are props that I know MyComponent will need. However, in most cases MyComponent also has components within it that need props from higher components, hence I use the {...this.props} operator to pass them forward. Should I be doing this, or should I be listing out exactly the props that the child components of MyComponent will need?
You should use a state management like Flux, Redux or Mobx (i think, haven't used Mobx at all) to combat this problem of passing props through multiple levels without the intermediate components needing them.
You should be passing only the props exactly needed down to the child. I read a great post on github about this but can't find it.
It's just hard to manage when your app grows and it's really an abuse of the Es6 spread syntax operator (i.e it makes it easy short term to pass props down, but long term you still have the problem, you are just masking it). Not sure if it slows down application but it will re-render all child components again if the prop changed which is unnecessary.
For example when using Redux you can "connect" components to a global state (think databases) and pass them through as props for whichever components you want and bypass components having to forward props to child components.
It's hard at first to learn but 1000% worth it.
You should pass in only the props needed, or implement a container component that only passes in the props needed. Or you can implement shouldComponentUpdate on your component. The easiest way to get performance is to only pass in the required props though.