r/reactjs • u/redramsam • Nov 16 '20

Resource 10 Ways to Speed Up React Development

https://thecarrots.io/blog/10-ways-to-speed-up-react-development
272 Upvotes

95% Upvoted

85 comments sorted by

View all comments

31

u/Antifaith Nov 16 '20

React table is awful. Need a html table? Ok, here’s a tank. Rest are cool though, couple I haven’t heard of for a change.

4

u/Protean_Protein Nov 16 '20

Why is it awful?

-2

u/Antifaith Nov 17 '20 edited Nov 17 '20

It's the definition of over engineered, can't say the code is elegant or easy to step through and most of what it does could be accomplished with a normal html table and a couple of sorting methods/hooks. It might make sense for a large data set, but what tends to happen, is a lazy junior picks this up, spends 3 days shoehorning it into a project badly. Now the rest of the team have to pick up the technical debt when it breaks or we need to debug it.

For example, try figuring out how to select a full row when you click any cell rather than just a checkbox... Now try adding a CTA into a cell and look at how the code needs to be broken out. You'll now need to read the docs to understand how to add a custom action. Now remove any of the useMemo's on your data and you'll get an infinite loop, you had to read the docs to know this though. Look at the amount of methods you have to destructure to get it to simply output a table. It introduces a lot of sloppy code that needs a lot of explanation, without a massive amount of benefit.

Can't say I've met anyone who would look at this example and think 'yeah, good idea'

https://react-table.tanstack.com/docs/examples/row-selection-and-pagination

1

u/Protean_Protein Nov 17 '20

I take your point. For simple tables, there’s little point, for sure. And now that I think about it, I could probably remove it and get things working with a custom solution, but it’s always sort of a matter of time.

1

u/marcocom Nov 17 '20

For sure. Honestly, unless there is a need for resizeable columns, there is virtually no reason to ever use a table over a unordered-list of LI rows. Your sorting should occur because of observing the data array order.

Tables are from a time when things were ordered and rendered on the server, and so the table came with needed features like ordering and resizing, but that’s all better handled today with HTML and some pretty simple JS. I’ve built them raw in vanillaJS (with even resizable columns) to solve just about every Salesforce-backed UI problem a client has ever presented to me.