For the last few months I've been programming in React using the MUI component library. I need to give voice to my feelings about it and am reluctant to voice them at places like StackExchange and StackOverflow because someone became abusive when he said the answers were in the documentation and I implied that the documentation wasn't very good. He did try hard at first, but after I asked a couple followup questions he became hostile and told me I should go away until I'd learned some HTML and Javascript. Admins got involved and erased his posts, but I think I'll keep my critical thoughts to myself from now on.
But I have to say them somewhere or I'll explode, so I'll say them here.
React is just nuts. It's a Javascript library that runs on the client side. When, for example, you do a database fetch, execution isn't blocked. Execution continues right on past the database fetch. So if you're doing normal programming type things like doing a database fetch followed by processing the data from the database, there is no database data to process. React has submitted the database request and received back a Promise that the database data will be delivered to you at some future time, then it has continued on to the code following the database fetch and that expects to receive that data so it can process it.
But that data isn't there yet, so instead of just processing the data you have to check if the data has arrived yet. If it hasn't you issue a page that says "Loading..." and quit. When the Promise delivers the promised data then execution resumes again at that point. Once again the code that checks if the data has arrived is executed, and this time the answer is yes, so you process the data and issue a nice webpage that has actual data on it. Executing the code that creates the webpage more than once is called rerendering.
To me this is crazy. Nuts. React works this way because it allows webpages to be constantly responsive to changes in the data, no matter where that data comes from. The user might have entered his email address and clicked okay, and instead of fetching another page from the server, React replaces the email address box with the password box. If you leave the page without entering a password it will raise a message in red letters that says, "You must enter a password." Probably everyone has seen this type of behavior, and the reason so many websites are acquiring a similar kind of look and feel is because many of them are using libraries like MUI. MUI's the most popular one, so anyone reading this has likely used a website implemented using the MUI library.
But this crazy behavior requires more than just checking if the data from the database is back yet. Rerendering can happen for reasons other than database data becoming available. I'm writing this because I've just run across a case that executes some counting code twice. Instead of counting the proper number of objects it counts them once and gets totals, then later it counts them again and the totals double in value. This is nuts! Since I have no idea why this rerendering is happening, I haven't yet figured out how to prevent it.
React has ways of preventing rerendering, but which one you need and why and how to use it are difficult to figure out. There's useEffect, useState, useRef, ForwardRef, etc., and there's really bad and incomplete documentation, and there are literally dozens and dozens of websites explaining them, but to me it seems like the blind leading the blind with helpful people with flawed and incomplete understandings relating approaches they worked out by trialing-and-erroring their way to something that works that they think they understand but they don't. I think React needs to go through another generation, or there needs to be another API level on top of it, because what's there right now is horrible.
Or at least that's my opinion. There, I've gotten some of my frustrations out.
--Percy
™ Version 4.2
(1)
