Consider this very basic example. The problem here is – we relying on React specific patterns for something that could easily be handled natively. Specifically – there is absolutely no need to utilize component state + post render effect when we can simply call the logic in the native event handler passed to button. Let’s… Continue reading Anti-pattern – are You overusing useEffect?
Category: React
React 19 beta and (later) React Compiler
Checkout the React 19 beta: https://react.dev/blog/2024/04/25/react-19 These changes seem more quality of life vs some of the lower level performance type changes we saw in React 18. React Compiler is the more exciting prospect here, current claims are that it will cut out the need for a lot of the efficiency fluff code we have… Continue reading React 19 beta and (later) React Compiler
Keep your FE dumb!
Try to keep your client as dumb as possible, to achieve this you should avoid the following: In many cases your service layer can take the heavy lift away from the FE which takes away complexity/ risk and avoids duplicating/ mutating business logic + domain sources of truth.
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 – 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
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
Jest – think integration
I want to use an example form component that uses react-hook-form, you can see it featured in my recommended packages post here. Let’s start by creating our form component. And now FirstField.tsx Let’s just assume that the implementation of SecondField is much the same as FirstField, but without the useEffect, and for the purpose of… Continue reading Jest – think integration
React – recommended packages
This post will be a work in progress, but for now I want to start with two great packages. The first is react-hook-form, this is one of the best packages I have used in recent years, out of the box it provides some great hooks and also a global context which allows your form components… Continue reading React – recommended packages