Sometimes, I realise that I’ve gone back to the same articles over and over again. Usually it’s when I Google something and realise the top-hit is already in the purple hue of “you’ve been here already”. For my benefit as much as yours, here’s a list of my recent most-visited articles!

Common mistakes with React Testing Library

Specifically the section on “using query* variants on anything except checking for non-existence”, but the whole article is illuminating and full of so many nuggets that it’s worth going back to.

I also keep returning to the section on querying ByRole, mainly because it has a link to a very useful list of the implicit roles placed on HTML elements: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles. I didn’t realise how useful the console output is when you’re writing a test using ARIA roles - it can show you exactly what element roles are present on the screen and shed light on why the element under test might not be present.
```
 TestingLibraryElementError: Unable to find an accessible element with the role "blah"

 Here are the accessible roles:

   button:

   Name "Hello World":
   <button />

   --------------------------------------------------

 <body>
   <div>
     <button>
       <span>
         Hello
       </span>

       <span>
         World
       </span>
     </button>
   </div>
 </body>
```
Kent is opinionated about the best-practises of testing, but always includes examples and documentation to back it up, so you can make up your own mind.

My tests are so much the better now I understand some of the principles underpinning the choices made by the React testing team.
Before you memo()

I love Dan Abramov’s blog. For those that don’t know of him, he’s a core contributor to React, but also an excellent educator. I fully recommend seeking out conference talks that he has presented.

This article on memoisation in React is short but so useful - basically a quick guide to help you think about restructuring your React components before reaching for the trusty memo.

See also: https://overreacted.io/a-complete-guide-to-useeffect/

This is another one of his articles that is heavily polluted with my traffic. It takes quite a bit of reading as it is very comprehensive, but there be gold within! I’ve found it’s taken a few goes round to get it to sink in but it has honestly transformed how I’ve used React hooks.
Practical React Query - TkDodo's blog

These recommendations are maybe getting a bit niche!

At one of my previous jobs we used React Query very extensively. It is often described as “the missing data-fetching library for web applications”. I soon learned that it had tons of little-known (by me) features that were super useful for optimising the synchronisation of data and state between the UI and application back-end (e.g. caching with query keys, adjusting the definition of ‘stale’ data).

Practical React Query gets straight into the weeds with useful examples and justification for why the library is written as it is. It really helped me get a much deeper understanding of the library as a whole, and made me much confident in recommending React Query for other applications.

If you’re also a React developer, check these resources out!

Resources I've used a lot lately

Common mistakes with React Testing Library

Before you memo()

Practical React Query - TkDodo's blog

Subscribe to my newsletter

Jo

Jo