Controller Hooks - Custom Hooks as Tiny State Machines
Hooks are one of the most powerful features of modern React and in this post we will look at how we can use hooks to build state machines.
react typescript
Senior Software Developer
Thoughts on web development, technology, and more
Hooks are one of the most powerful features of modern React and in this post we will look at how we can use hooks to build state machines.
A practical mental model for shaping custom hooks: resource, behaviour, integration, controller, and adapter.
Many of us have worked with React, some of us have even worked with the page router in NextJS, but what is the app router? And how is it different from React routing?
Generics are an incredibly powerful feature in TypeScript. In a previous post we went over some of the basics of Generics. Now we will dive deeper and unlock some of the true power of this feature of TypeScript.
Most of us agree that having tests are good, and having great tests is amazing. But in a React application how do we write them? The line between testing behaviour and implementation can sometimes blur making our tests less valuable. We will look into how we can write valuable tests with React Testing Library.
Mapped types and conditional types are the 'magic' behind utilities like Partial, Pick, Awaited, and more. In this post we’ll build them from first principles and see how they let us turn one type into many.
When developers, or anyone really, tries to solve a problem they rarely see the answer immediately. Instead they run a process that helps them to solve such problems. We will run through one such process using a Leetcode problem as an example
Most developers meet generics through Array<T> and Promise<T> which are two of the most common instances when it comes to examples. To start the journey into the world of Generics we will traverse quickly through Arrays and then promises and ended at the power of inferring types from Generics.
Hooks make React code powerful and expressive — but also surprisingly easy to tangle. In this post we’ll look at three subtle anti-patterns with hooks: mega-useEffects, context overuse, and over-smart custom hooks.
React can help protect us from XSS issues but it doesn't make it impossible. In this post we will discuss how React keeps us safe and when we still need to be careful.
Type narrowing is the process TypeScript uses to refine a value’s apparent type based on control-flow and runtime checks. This article explains the four primary narrowing tools—typeof, instanceof, in, and user-defined predicates—along with recommended patterns and common pitfalls.
A practical mental model for React’s render pipeline, and why 're-render' isn’t always the performance concern we may think it is.
Security is often associated with the server or backend developers but frontend developers need to be aware of security as well. In this post we will discuss one of the most common security issues in the frontend, XSS.
Pragmatic rules, real-world examples, and a decision flow for choosing between type aliases and interface declarations in TypeScript.
As frontend developers we need to understand security policies the browser imposes, why it imposes them, what happens if they're violated and how to debug issues around them. In this post we will go over these topics and understand why it is important we're aware of them and also tackle the dreaded CORS error.