Visualizing React state flow and component hierarchy
While we may have a good understanding of the theory behind how components render and state flows, there are, at times, divergences in the theoretical and practical. I wish I had a dollar each time I “knew” something to be true, turned out not to be so.
Many times, we look at static code and try to imagine what it is doing at runtime. During interactions, data loads, data discards, and many other operations there are changing conditions that are just hard to reason out.
Recently Horatiu Mitrea announced his team have been working on open source Firefox and Chrome browser extensions that visualize how state flows in React. Being able to trace these changes visually will make understanding and debugging and application much easier.
Additionally, these browser extensions will also visually lay out component hierarchy. Now you can see how your components are chained together. Being able to understand these complex interactions in a visual manner will simplify your life.
As of this article, the Firefox extension is available. The Chrome extension is awaiting approval before you can try it out. I’m interested to hear your thoughts once you’ve used this tool.
Case study: Analyzing Notion app performance
It’s too easy to fall into the trap of “Works On My Machine!”. Web and web app performance are affected by hundreds of variables. What is the slowest network speed on the route? What processor does the mobile phone have in it? Are we blocking code execution with unimportant files?
Properly constructing your application for the best performance insures it gets used the most amount of times. Let’s face it, given an alternative, most of us will close an app if it’s not perfectly functional in a few seconds.
Often, the easiest way to build a web app has hard performance implications. Learning the proper techniques for ensuring your application performs the best over the widest range of likely scenarios is an important skill and one that distinguishes the average developer from the senior level developer.
Ivan Akulov did a deep dive in web app performance using the Notion application as a case study. The Notion app is an Electron/React Native/Web application that serves as a very advanced note taker. Customers and users love the product, but no one loves the lengthy start-up time.
Ivan goes through many facets of the application as they relate to practical web performance. He discusses tools that are important to use while working on a web performance task. Also, he explains a bit about how the application is loaded, executed, and rendered.
A deep dive into React Context API
The React Context API is a useful way for child components to get data from parent components. This used to be a more difficult process. However, with the useContext hook, this API has become much simpler to use.
Not everything needs Redux or another state management library. In this article you will read why the Context API is in React and how you can use it appropriately in your applications.
How to Publish React Components
Publishing React components properly requires documenting, organizing, and publishing the code and associated files. This redundant process is full of opportunities to not be consistent or to skip an important step. Bit is a scalable way for your team to host, share and collaborate on your components in one place. If you work in an organization with lots of apps and lots of developers, this platform can help you share larger portions of code across all teams.
Two cool features are reusable development environments so you can build, test, and render the component in full isolation and smart component versioning to help you keep track of the component as it changes over time.
Custom React Prop Type Validation
It’s very important to make sure you get clean data. Validating data at the edge is important to ensuring data cleanliness. By using good practices, you can make sure the data in your system conforms to the specific data rules for the data type.
Data can be grouped into simple types like string, number, array, and object. At a higher level, a string could be a more sophisticated data type like date, email, or phone number. The prop-types package provides a great platform to write validation. In this article, Jae describes the process for writing a custom validator that validates email. To do so, Jae also uses the isemail npm package. In the examples, you’ll see how to bring in other packages into your custom validator.
Adobe Flash will finally die on December 31, 2020
Adobe Flash is a technology with a long history. Flash was one of the first interactive runtimes for use on the web. Back when “Animation” on the web was the venerable and much maligned <blink> tag, Flash content rolled along at 60 frames per second.
In the mid-2000’s Adobe acquired the Flash technology from Macromedia, then built an application framework around it called Flex. Flex was THE way to write cross-platform applications with interactivity, long before the first “Single Page App” came along.
Try as they could, Adobe could never make the Flash Player a meaningful source of revenue. The closed nature of the platform had it’s pros and cons. The Pros were the platform team could innovate without requiring substantial industry cooperation. The Cons were the closed nature of the runtime caused distribution issues. Further, Flash Player always seemed to have a nasty security issue or two in the news.
The days of paid runtimes are gone. All browsers have amazing capability to handle interactivity. The emergence of web frameworks that simplify building single page apps make the web the default choice. Flash has run it’s course and will be shut down at the end of 2020.
Interestingly enough, many companies still are using Flash Player based apps. Our consulting company has a specialty of replatforming Flex and Flash Player based apps into modern web-based architectures.
How to use React memo
React contains many performance optimizations. As such, apps run fast by default. Sometimes choices made in components make the component rendering slower than idea. There are many ways to address slow components. One way is to use the Memo function in React to avoid unnecessary re-renders.
In this article Robin Wieruch goes over the usage of the memo function in React. He explains how it works, and when you might want to consider using it in your applications. In all things, beware the premature optimization. It’s best to let React do it’s thing until you can prove you have a case worth addressing.
