React? We’ve got (no) problem. Top5 React issues.
Commonly known as the most popular JavaScript framework… Wait… React JS is indeed based on JavaScript, but we’re not so sure about naming it a framework because… it’s rather a library? Which comes first, the chicken or the egg? ;) No matter if we prefer chicken or egg, there’s no argue that React.js is number 1. Netflix, Instagram, and Facebook are just at the beginning of the long list of web apps developed thanks to React.
React seems to be ideal, but… there’s always a but(t). Everyone who’s working with React had, has, or will have a bigger or smaller problem with it. Does it mean we should switch somewhere else? Hell no, because there hasn’t been developed a bug-proof framework.
Speaking of the problems… bigger or smaller. Here’s a short list of some issues our team faced during CoreUI React v4 development. As our v4 goes hand in hand with React v18 and is 100% compatible with it, some issues may have been seen… somewhere, in a galaxy far, far away… ;)
Here’s our Top5:
- React Optimizing Compiler
- Offscreen
- Transition Tracing
- Asset loading
- Server components
Ad. 1 React Optimizing Compiler
ROC is a compiler that automatically generates the equivalent of useMemo and useCallback calls to minimize the cost of re-rendering while retaining React’s programming model. React Core Team finished a rewrite of the compiler on mid-June 22 to make it more reliable and capable. What’s new? Now you can analyze and memorize more complex patterns such as the use of local mutations and opens up many new compile-time optimization opportunities beyond just being on par with memoization hooks. We must admit, we like it, but still would be great to work on the compiler. Make it more intuitive, give various insights into how it works under the hood, and live renders the compiler’s outputs as you type. After that final step, it’ll be perfecto.
Ad. 2 Offscreen
There are now two options when you want to hide and show a component. One is to add or remove it from the tree completely. But you know it’s problematic, cause the state of your UI is lost each time you unmount, including the state stored in the DOM, like the scroll position. Of course, one may say, that there’s also an option to keep the component mounted and toggle the appearance visually using CSS. But it comes at a performance cost because React must keep rendering the hidden component and all of the stuff whenever it receives new updates. So here’s a chance for offscreen, which seems to be the right, third path - hide the UI visually, but deprioritize its content. When content is hidden, it doesn’t need to stay in sync with the rest of the UI. Easy? Yes, sir, cause it’s being designed under a step-by-step approach, starting from the low-level capability that unlocks high-level features.
Ad. 3 Transition Tracing
As we all know, Interaction Tracing API had some fundamental issues in design that rather blocked than helped developers. React Core Team claims to work on a new version for the Interaction Tracing API (tentatively called Transition Tracing because it is initiated via startTransition) that solves these problems – and we believe this one should change the game. As for now, we shall stick to React’s two profiling tools. React 18 introduced the beta Timeline Profiler to the original Profiler known from the previous versions. The latest one shows when components schedule updates and when React works on these updates. So it seems to be a good direction, cause both Profilers help developers identify performance problems in the code. As for now, there’s no better option to watch for performance regressions and to understand why an interaction was slow and how to fix it.
Ad. 4 Asset loading
Most of the developers like React because of its simplicity and reusability. But as most of us like popcorn, almost no one loves “popcorning” as the visuals pop and layout shifts. Suspense should fix it or rather block it. As being said – React is simple, so, there’s no wonder then, that e.g. fonts, scripts, or images are mostly preloaded and loaded using external systems. It’s easy but it can be also tricky when trying to coordinate across a “brand new world” like server components or streaming. It seems that React Core Team knows the issue because they’ve been trying toad APIs to preload and load deduplicated external assets through React APIs that work in all React environments.
Ad. 5 Server components
It’s been almost two years since in December 2020 React Team announced an experimental demo of React Server Components (RSC). Since then React 18 has brought to live dependencies and the team seems to be focused now on changes inspired by experimental feedback. Using routers and data fetching is an answer if you don’t want to block RSC’s release and another good option introduced is that React is moving away from the file extension approach in favor of annotating boundaries.
Last few words
Is React 18 a final solution? Rather not, it’s more a good path for future releases. On the other hand, it significantly improves the user experience. As we all, CoreUI’s Team would say we have everything, apart from time. It’s the most valuable asset for all of us, that’s why we’ve mastered simple, customizable, and easy-to-learn React.js UI components and React.js Admin Templates, which significantly cut development time. It saves thousands of hours by giving everything you need to create modern, beautiful, and responsive React.js-based applications. And what’s your story behind it?
