Many adopters of TypeScript will use it without strict mode enabled, by doing this you are forfeiting some of the safety that TS can provide during development. Strict Null Checks are a great example of what you might be missing! If you have a legacy codebase and you are trying to phase TS in, checkout… Continue reading TypeScript – please use strict mode
Javascript – get acquainted with falsy
If you are not aware of what the exact definition of Falsy is in Javascript, then I recommend patching that knowledge gap immediately. Here is the definition. I want to highlight why it is important to have a full grasp of this concept. Consider this code: Here we have an age variable and we expect… Continue reading Javascript – get acquainted with falsy
React – migrating lifecycle to hook
At some point in your React career you might need to migrate a class based component to a function component. The old component may have lifecycle methods performing operations for the component, and you might think how on earth can all that go into this function component?? Let’s look at some examples, in your old… Continue reading React – migrating lifecycle to hook
React – avoid redundant rerenders with a ref
Consider this scenario, we have a React component that shows a subscription form, the user can move on to phase 2 of the form by clicking a button. The first phase takes a name and email address. Once the user enters an email, the component will silently check if they are a member, because if… Continue reading React – avoid redundant rerenders with a ref
Javascript – loop efficiency
I want to run through a scenario that highlights how loop performance can be very poor…when poorly considered, and you might not realise it if the code “works”. Consider this scenario – the database has a table of 30,000 bookings for a collection of tennis courts, for each booking there is a startDate and an… Continue reading Javascript – loop efficiency
Javascript – hoisting
Recently I had to refactor a very large react class component into a function component, the overall goal was to keep the business logic the same, but add thourough typing so the risk of regressions from a much larger refactor later would be lower. I ran into a problem with this, it seemed at first… Continue reading Javascript – hoisting
Javascript – be aware of code transformation
Many developers new to React are not aware of what is really going on with their code base at a lower level. The code you write will often be very different from the code that reaches the browser at runtime. There will certainly be no TypeScript. See my post here on that specifically. I want… Continue reading Javascript – be aware of code transformation
Chrome Dev Tools – element mutation events
Have you ever had trouble debugging an element that is conditionally visible. If it was visible because of a css hover state, this might be quite simple, as most developers will be aware that the inspector allows us to force a state, but sometimes forcing this state does not show the conditionally visible element, and… Continue reading Chrome Dev Tools – element mutation events
React Testing Lib – don’t misuse act
After reading this article you should checkout other common mistakes using RTL here: https://kentcdodds.com/blog/common-mistakes-with-react-testing-library Ever noticed this warning in your tests? Noise like this in test runs can be really annoying, and if we read the error in a bid to find out how we might get rid of it, we might think – well… Continue reading React Testing Lib – don’t misuse act
React – consider styled components
Instead of having css (or equivalent) files, considering having styled components. There is serious value to taking this approach as it results in a much more contextualised styling system. Let us first take the following example that does not leverage this approach: In file SomeComponent.tsx in file styles.css notice that these two units of code… Continue reading React – consider styled components