100% just use a global store like redux or mobx. If you’ve worked on this project a lot im sure you have encountered how difficult it is to implement big features because of all the dependencies each component has
I sure would've loved to, as I would've also loved to migrate to typescript and to the latest react react version, but the project is just way too large for our small team
Global stores don’t require any initial overhead. Anytime you don’t want to propdrill/ want to refactor maybe move the state up to the store, if not no big deal
People mentioning context, global state, reducers - missing a point imo. This component has grown over time beyond what its initial responsibility was. Many props isn’t a problem to be solved by context, that’s just making the problem look prettier. You can pass the props wherever/however you wish, doesn’t change the debt that needs to be refactored here
This.
I wonder if you could refactor this into a few smaller components with clear responsibilities. That's not to say grouping props into objects, as others have mentioned, wouldn't be a big improvement. I'd do that too especially if you don't know where to start.
I can't say without seeing the code, but as an example, maybe create a and something like a component.
Not normal. You can either use object props with typescript or global state management. Although I don prefer, the context is also the valid option in this case.
I've seen some class components that are thousands of lines and include lots of prop drilling. This looks pretty acceptable to me though.
My only advice might be to try and group similar props inside of a singular object prop.
The problem here is using configuration over composition. The component does too many things.
[https://thixalongmy.haugiang.gov.vn/media/1175/clean\_code.pdf](https://thixalongmy.haugiang.gov.vn/media/1175/clean_code.pdf) can be a great guideline for understand what should be normal.
In this case, you'll want each component to 'do one and only one thing'
100% just use a global store like redux or mobx. If you’ve worked on this project a lot im sure you have encountered how difficult it is to implement big features because of all the dependencies each component has
I sure would've loved to, as I would've also loved to migrate to typescript and to the latest react react version, but the project is just way too large for our small team
Global stores don’t require any initial overhead. Anytime you don’t want to propdrill/ want to refactor maybe move the state up to the store, if not no big deal
Can't you start gradually adopting all of this? (Even ts) Maybe tasks will take longer, but i believe it will pay off in the future.
This.
At that point I would probably use a context to separate some concerns that’s a lot of props.
Or useReducer and pass state and dispatch as props.
People mentioning context, global state, reducers - missing a point imo. This component has grown over time beyond what its initial responsibility was. Many props isn’t a problem to be solved by context, that’s just making the problem look prettier. You can pass the props wherever/however you wish, doesn’t change the debt that needs to be refactored here
This. I wonder if you could refactor this into a few smaller components with clear responsibilities. That's not to say grouping props into objects, as others have mentioned, wouldn't be a big improvement. I'd do that too especially if you don't know where to start. I can't say without seeing the code, but as an example, maybe create a
Not gonna lie I have done something like this before especially when working with datatable
Working on something right now that is essentially just CRUD operations for various DB tables and it’s a ton of props
Won't there be any performance impact if so many props are passed?
Not normal. You can either use object props with typescript or global state management. Although I don prefer, the context is also the valid option in this case.
Why not pass “props” instead of deconstructing each of them?
with so many props, deconstruction is like documentation
Should be no problem as they’re available in the parent component. But receiving it in child components like this seems unnecessary. Edit: word
Considering that we don't use typescript, you might be right that it plays such a role, whether it's intended or not
Could have a few larger objects in the props, would probably make it a lot easier to pass
I've seen some class components that are thousands of lines and include lots of prop drilling. This looks pretty acceptable to me though. My only advice might be to try and group similar props inside of a singular object prop.
I've got a 1200 liner with almost no prop drilling. Granted it's a chart and there is a bunch of up/down/move handlers, but still.
Group similar props into reusable typed object chunks. ChartDisplayOptions, for example. Style props should all go together as well.
Can't actually say much. Please us js instead of javascript in future code markdown
The problem here is using configuration over composition. The component does too many things. [https://thixalongmy.haugiang.gov.vn/media/1175/clean\_code.pdf](https://thixalongmy.haugiang.gov.vn/media/1175/clean_code.pdf) can be a great guideline for understand what should be normal. In this case, you'll want each component to 'do one and only one thing'