React Hooks in 5 Minutes
If you use React Hooks well, you can move your business logic out of your React components. This keeps your component code nice and tidy. Also, you can move away from Class based components because the hooks are automatically plugged in (or Hooked – see what they did there?) into the component lifecycle. Hooks are the accepted way of writing modern React components.
What does that mean for those of us with components that aren’t using hooks? Well, it’s time for a refactor. Per Borgen wrote up an article that goes through decomposing existing components into hook-based React Component architecture. In his article, he shows how to destructure components and for those of you who want to adopt hooks and would like to see how to move into hook-based architecture, this article lays it out nicely for you.
Deep Dive – React Internals
If you find that the behavior of React is sometimes a mystery, you might be interested in learning more how React works internally. Taking the time to understand the behavior of the underlying library is a good way to demystify how the library works. By doing so, you’ll be more prepared to anticipate what React will do in certain situations.
Graham Dyson used his software analysis tool, Eunice, to profile the structure and dependencies of React. The article lays out the information in easy to understand visual ways.
Graham explains Eunice as:
“Eunice helps improve software architecture by analyzing, measuring, exploring and defining; structure and dependencies. Eunice is based on the premise that software structure and modularity improve when dependencies are unidirectional. Eunice’s approach isn’t limited to direct dependencies, but includes indirect dependencies as well. With Eunice you define an intended structure/architecture, it shows you dependencies that don’t match, and you can further refine the definition or update your code to match.”
React Suspense
Inconsistencies in user interfaces can be caused by many factors. One of the most common is when several data fetches are kicked off by a React app and the results all come in at different times. Depending on how the application was coded, this could result in an inconsistent and confusing interface. Once data calls go out to the public internet, it can be anyone’s guess when they’ll come back. Congestion, equipment issues, latency and other factors conspire to make response times inconsistent at best.
Suspense is a new React API designed to help. Currently in an experimental state, Suspense provides a way to flag the controlling React instance that the component is waiting on async data. As such, it should be kept in a consistent state until the expected data is returned. React will keep track of which dependencies in the tree are in suspended states and hold off on rendering until all data responses have been returned.
Adam Rackis wrote up a post showing how you can play with the Suspense API and suspend components. The suspense API simplifies data dependency management, reduces unnecessary renders, and keeps track of the dependency complexity without you having to manage it. This one is worth keeping an eye on.
More Fiber in your React
Since version 16, the React library uses an internal algorithm called Fiber to manage the internal instance tree. As the state of components changes, there needs to be the necessary changes in visual elements rendered to the screen. This reconciliation process ensures that changes internal that would affect the visual state, are reflected in the final interface.
Understanding this mechanism is an important factor to writing well performing React applications. Max Koretskyi wrote up a post on Fiber, and how it works. In this post, you’ll learn about the types of processing Fiber does and when these work units are triggered.
Hooks and Firebase
One way to learn how to write hooks in React is to follow along with Brian De Sousa’s article on React Hooks with Firebase Firestore. In this post, Brian goes over building a typical Todo/List application based on React, Hooks, and Firebase Firestore.
Google Firebase Firestore is used in the sample application to stream data in real time. While this isn’t necessary an important feature for a Grocery List app, it does have a lot of really good uses in the real world. What is especially interesting to note is how much cleaner the hooks-based code is, versus how you would normally do this using Class Components.
Why’d you pick TypeScript?
Statically typed front-end languages bring in stronger typing language features into a natively loose-typed environment. After all, JavaScript doesn’t much care about types. It’ll do crazy things to try and coerce your values into whatever type is required by the operation. (NaNNaNNaNNaNNaN anyone?)
When building out complex systems, having a strong type checking system can head off all sorts of bugs that would be found (hopefully) later on when fixing them is much more expensive. There are a number of popular languages that have emerged in the last decade for these reasons. The fine folks at Hasura were building out their console and went through an evaluation of all the popular options. Aleksandra wrote up the process, their findings, and the outcome in this blog post on the Hasura blog.
10 Most Common JavaScript Developer Mistakes
Who is ready for a listicle? Me! Me!
Sandra Larson wrote up a post on the 10 most common mistakes JavaScript developers make. This post is fun to go through and see which (if any) you are doing. I always like these posts because I want to be sure I stay continually updated in my skills and haven’t fallen behind. A bonus is if I don’t find any of my mistakes in there, I get to have a superiority complex for 20-35 seconds.
I do take objection to her saying “However, many beginners make the same mistake, trying to execute the code without loading it.” Because I just did that last week. 😊
