Forem: Barry Michael Doyle

Why I Built Patch Pulse

Barry Michael Doyle — Sun, 12 Apr 2026 14:33:40 +0000

The problem that led me to build Patch Pulse, from Slack notifications to a monorepo-aware CLI and an in-progress VS Code extension.

One of the more frustrating parts of working with open source is the gap between "the fix is coming in the next release" and the moment that release actually lands on npm.

You report a bug. The maintainer replies quickly. A fix gets merged. Then the waiting starts.

At that point, most of us fall back to the same bad workflow: checking npm repeatedly, refreshing release pages, or trying to remember to come back later. It is a small bit of friction, but it adds up quickly, especially when the package in question sits in a critical path.

I keep running into this problem.

Recently, my team hit exactly this kind of situation with bignumber.js. We were interested in a newer release because of some promising performance work, but one behavior change made the upgrade risky for us: initializing BigNumber with an empty string could now crash instead of behaving the way our older code expected. In a large, long-lived codebase, that kind of edge case is not always trivial to audit safely. The maintainer mentioned that a follow-up release was in progress, which was useful, but it still left us in the same place: waiting and manually checking for updates.

I had the same feeling earlier on while experimenting with TanStack Start back when it was still in beta. When you are evaluating fast-moving tooling, you often do not want to keep rechecking whether a fix has shipped. You just want a signal when it has.

That was the seed for Patch Pulse.

Starting with Slack

The first version of Patch Pulse was a personal Slack bot.

The idea was simple: if I care about a package release, I would rather be notified in Slack than keep polling npm myself. So I built a small service with a database and a scheduled job that checked npm for version changes on packages I was tracking. When something changed, the bot posted an update for me.

That solved the original problem well enough that I kept using it.

Over time, I started pushing it beyond a personal tool. I wanted it to work for other teams too, not just for my own workspace and habits. The Slack app is now much more flexible:

You can track packages privately for yourself in DMs.
You can track packages in shared channels for the whole team.
You can track multiple packages at once.
You can reduce noise by only notifying on minor or major releases.
Notifications include links to the relevant GitHub release pages where possible.

There is also now a small Slack app UI so the bot feels more like a product and less like a collection of slash commands.

If you use Slack and this sounds useful, install Patch Pulse and try it in your workspace. It helps you stop manually checking for releases and get notified when updates you care about actually land.

Expanding into a CLI

While the Slack bot was solving the "tell me when a package ships a new release" problem, I kept running into a second, related one in my side projects: "show me what is already outdated in this repo right now."

That led to the Patch Pulse CLI.

The CLI scans your project for package.json files, checks dependencies against the npm registry, and reports available updates grouped by severity: patch, minor, and major. It is also monorepo-aware, so it can scan multiple workspaces from the repo root instead of treating a large repository like a single app.

I also added an interactive mode so you can choose whether to apply patch-only updates, minor updates, or everything in one go.

More recently, I gave the CLI a substantial rewrite with a few goals:

proper monorepo support
zero runtime dependencies
better performance
tighter security and reliability
a cleaner user experience

If you want to try it, the quickest path is:

npx patch-pulse

The package is available on npm.

It is now a small ecosystem

What started as one personal Slack bot has gradually turned into a small family of tools.

I recently moved the work into a monorepo on GitHub so it is easier to evolve the tools together.

There is also a docs site.

At the moment, Patch Pulse includes:

a Slack bot for release notifications
a CLI for checking and updating outdated dependencies
an early-stage VS Code extension for inline dependency version information

The VS Code extension is still in development, but I am excited about where it could go. The direction I care about most is making dependency updates easier to evaluate inside the editor, not just easier to detect. Inline version status is useful, but release context, summaries, and links are what really help you decide whether an update is worth your time.

What I want to build next

There are a few directions I am considering from here.

One is richer release intelligence in the notifier flow, especially summaries that help answer the real question behind every version bump: "Should I care about this update right now?"

Another is expanding beyond Slack into other platforms such as Discord.

The broader theme is consistent: I do not just want Patch Pulse to tell me that something changed. I want it to reduce the effort required to decide what to do next.

If this is useful to you

If Patch Pulse sounds relevant to your workflow, try it out and let me know where it helps or where it falls short.

If you want to follow along as I keep building it, follow me on dev.to or watch the GitHub repo. If you have bugs, feature requests, or product ideas, open an issue on GitHub.

Stop Using ChatGPT To Write Your Blog Posts For You! It's Not Working...

Barry Michael Doyle — Thu, 16 Nov 2023 00:52:47 +0000

Disclaimer

I'm going to be frank here. I'm using ChatGPT to proof read this post. I even used ChatGPT 4's DALL-E features to generate the banner.

The State Of AI

At the time of writing this, we are nearing the end of 2023 and ChatGPT has been available to the public for about a year now. GPT-4 now has a knowledge cut off date of April 2023 and browsing capabilities. Do you know what that means? It means we've hit the era of AI incest or AI echo chamber. AI has officially started learning from crappy bad misleading content produced by itself last year.

Now to be fair, people have been posting low quality garbage on the internet since its inception. But at least the garbage posters had to take time to produce garbage back then because we didn't have AI to speed-run that process for us.

I Am A Hypocrite

My journey with writing blog posts using AI assistance looks a lot like this meme template that I use way too much:

I feel guilty writing this post now because I'm guilty of running my written work through ChatGPT to a point where my own voice is lost in AI lingo. In fact, about a month ago I was ready to write a post about how to use ChatGPT to write your blog posts. This post will technically inversely answer that question.

ChatGPT Is A Tool, Not A Crutch

Just like a spell-checker is pretty useless if you feed it gibberish or nothing, ChatGPT is also useless if you ask it to come up with results without any guidance.

I use ChatGPT in my programming to save me time by writing unit tests and e2e tests for me. I sometimes also use it to build out UIs for me after feeding it the context of what I'm currently using. There have been a bunch of scenarios where I know exactly what I want to accomplish but don't feel like remembering the syntax so ChatGPT comes to the rescue. I've even used it as a sounding board for ideas at crazy hours of the night when nobody else is awake to talk to me.

In all these scenarios it helps me accomplish my goals. Sometimes it gets the job done very well, and sometimes it misses the ball completely. The problem comes in when you blindly trust it.

I used to play a game where I'd hit the autocomplete button on my phone to see what strange nonsensical string of words it would produce. The results made less sense than the drunkest text I had ever received. This autocomplete button works great to speed up typing, but unguided it becomes worthless.

The biggest problem here is that ChatGPT can "sound right", and that will mask misleading information.

The Problem With Using ChatGPT To Write For You

Writing technical blog posts has always been a great way to impart your knowledge and talk about your experiences. It is a great way to practice communication and solidify your understanding on the topic you're writing about. A big part of writing is to demonstrate your knowledge in a specific area and your ability to communicate.

This is where the issue of AI generated content crops in. People - especially developers - are lazy. When you ask AI to come up with ideas for you, you are opening yourself up to writing about concepts that you don't really understand. This means that you have no way to vet whether or not the content that you're generating is actually true or not. In the context of software development, the generated content can also point to outdated information.

Horror Story Examples

I saw a post on Dev.to the other day called "45 NPM Packages to Solve 16 React Problems". I'm not going to link to it because I hope it gets deleted. The post "sounded" legit but it was full of information that was good for a developer in 2018. The problem was that many packages on that list were linking to projects that had been abandoned. If the writer of that post had actually used those packages, they would know this. In fact, even the packages that were not out of date still linked to versions of the packages that were no longer maintained.

In another post, I read the following concluding statement about TypeScript types vs interfaces:

By applying these best practices, you can ensure that your TypeScript projects are not only efficient but also outrank others in search engine results.

This is just blatantly incorrect. If you know anything about TypeScript you would know that using a type over an interface will have absolutely no effect on your project's search engine ranking. In this case you can see that dodgy misleading information can creep in everywhere.

Conclusion

Using ChatGPT to write on your behalf is only going to hurt you in the long run. Use it as a tool, not a crutch.

Do your part in preventing the rise of low quality content by calling it out to prevent others from blindly following misleading information on the internet. And be careful yourself not to be misled by content that "sounds right" but isn't.

How to Build a Custom React Hook to Listen for Keyboard Events

Barry Michael Doyle — Mon, 13 Nov 2023 07:14:20 +0000

I recently built a neat little slide-out menu bar for an improved mobile viewing experience on my personal website.

This is a compressed gif; it is way smoother in action.

Part of my quest to make my work as accessible as possible includes navigating my site nicely using keyboard events. So, I decided to add a little keyboard shortcut to close my open menu when the Escape key is pressed.

Instead of jumping to a library that would implement this trivial change, I opted to build out this functionality myself, which gave me more control over exactly how it would work.

The end result is this simple useCloseMenuOnEscape hook that takes in values based on my isMenuOpen value and my toggleMenu function.

export function Navigation() {
  const { isMenuOpen, toggleMenu } = useLayoutStore();

  useCloseMenuOnEscape({ isMenuOpen, toggleMenu });

  return <>The part that is irrelevant to this post</>;
}

Under the Hook - Excuse the Pun

Let's dive into my useCloseMenuOnEscape hook:

import { useEffect } from "react";

interface UseCloseMenuOnEscapeArgs {
  isMenuOpen: boolean;
  toggleMenu: () => void;
}

export function useCloseMenuOnEscape({
  isMenuOpen,
  toggleMenu,
}: UseCloseMenuOnEscapeArgs) {
  useEffect(() => {
    if (!isMenuOpen) {
      return;
    }

    function keyDownHandler(e: globalThis.KeyboardEvent) {
      if (isMenuOpen && e.key === "Escape") {
        e.preventDefault();
        toggleMenu();
      }
    }

    document.addEventListener("keydown", keyDownHandler);

    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  }, [isMenuOpen]);
}

As you can see, it's actually all just a simple useEffect hook that does the following:

It runs whenever the isMenuOpen prop changes.
If the isMenuOpen prop is false, it doesn't do anything.
If the isMenuOpen prop is true, it adds an event listener that will call the toggleMenu function if Escape is pressed.
If the component that this hook is running on is unmounted, or the isMenuOpen prop changes, the event listener is removed.

This logic extraction to a custom hook is a great way to contain specific business logic in its own module. As you can see from my code snippet of the Navigation component above, it is much easier to read what is going on using this abstraction.

A More General Use Case Hook

My use case above was rather specific, but if you need to create a more generalized reusable hook, you could create this:

import { useEffect } from "react";

interface UseKeyboardShortcutArgs {
  key: string
  onKeyPressed: () => void;
}

export function useKeyboardShortcut({
  key,
  onKeyPressed
}: UseCloseMenuOnEscapeArgs) {
  useEffect(() => {
    function keyDownHandler(e: globalThis.KeyboardEvent) {
      if (e.key === key) {
        e.preventDefault();
        onKeyPressed();
      }
    }

    document.addEventListener("keydown", keyDownHandler);

    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  }, []);
}

In this scenario, you have a hook that you can use that accepts a key prop used to define what keyboard key you're listening for. It also accepts the onKeyPressed, which defines what will run if the specified key is pressed.

You can run this hook in your component like this:

function MyComponent() {
  useKeyboardShortcut({
    key: "Enter",
    onKeyPressed: () => console.log("Enter was pressed!"),
  })

  return <>whatever irrelevant thing you want to render</>
}

In this simple example, whenever MyComponent is mounted, an event listener is added that listens for the key Enter. Once Enter is pressed, it will run onKeyPressed, which in this case is a console log that prints out "Enter was pressed!".

Conclusion

I hope this post has given you insight into how you can create your own keyboard event listening hooks rather than jumping to a library.

Building your own solutions in this context gives you a finer grain of control over what you'd like to happen without adding another dependency to your project.

Patch Pulse: Devlog #1 - Get notified when new packages are released

Barry Michael Doyle — Fri, 20 Oct 2023 17:12:37 +0000

Welcome aboard the Patch Pulse journey, my latest side project that has captivated my inner coder. These devlogs aren't just about sharing my project (okay, a little bragging!), they're about keeping my spirits high and, hopefully, encouraging others to turn their ideas into reality. Ready to jump in? Here we go!

What Exactly Is Patch Pulse?

In essence, Patch Pulse is your digital lookout, an alert system that notifies you instantly when there’s a new version of the software packages you track.

For now, Patch Pulse starts life as a Slack bot focused on npm packages, shining a light in your chosen Slack channel whenever there's fresh release news for your tracked packages. But there's more on the horizon — I'm planning to branch out into additional chat services and coding environments.

Working as a Senior Engineer at SecuritEase, I've always needed to keep up with the newest updates in our node_modules. With our team relying on Slack, I thought, "Why not make a bot for this?" And that’s how Patch Pulse sprang to life!

Envisioning Patch Pulse:

Since kickstarting this project, my head's been buzzing with potential.

Imagine Patch Pulse not just limited to Slack but also offering updates via:

Alerts on Discord
Alerts on Microsoft Teams
Email notifications
Push notifications on mobile applications

And there’s more — I'm picturing a system where if you're up for it, you could use Patch Pulse data to create your own custom alert tools.

While I’m at home in the JavaScript/TypeScript world, I'm eager to chart new waters. I've been thinking about diving into ecosystems like PyPI, Go, and NuGet, but I'm all for exploring even beyond these.

The Near Future for Patch Pulse:

I’m not rushing Patch Pulse, but I do have goals set for the rest of 2023:

Joining the Slack App Directory: You can test the bot here, but I’m shooting for an official spot on Slack's App Directory. I just need about 10 workspaces actively using it, then we can submit it for review!
Moving Into Discord: I’m on this, but I want to gather solid feedback from the Slack version first. So, expect updates!
Growing a Community: I’ve laid the groundwork with the Patch Pulse Community Discord, but it needs more voices and energy. If you're passionate about nurturing online communities, I’d love your insights or collaboration!
Adding More Ecosystems: I’m all ears for what ecosystems you’d like integrated next. PyPI is currently top of my list.
Continuing This Story: Consider this post the first chapter of the Patch Pulse narrative. There’s more to come, including deep dives into features, development stories, and yes, some tech-heavy showcases.

Closing Comments

This project is pushing me beyond my usual frontend focused boundaries, and I’m loving every new challenge it brings!

Keen to get Patch Pulse in your Slack workspace? Join the journey here!

Feel free to share your thoughts, feedback, or suggestions by leaving a comment below! I want to know which of these potential features excites you the most?

Thank you for sharing in this adventure with me; your support means the world!

Exploring the New useOptimistic Hook in React: Enhancing UI with Optimistic Updates

Barry Michael Doyle — Thu, 19 Oct 2023 15:57:55 +0000

If you're as excited about React's new features as I am, you've probably been keeping an eye on the experimental builds. In this post, we're going to take an early look at an intriguing new feature that's not yet part of the official release: the useOptimistic hook. This hook promises to simplify the way we handle optimistic updates in our React applications, making them feel snappier and more responsive. Let's explore how to use this experimental feature and consider the potential it has to enhance our user experience.

Experimental Disclaimer

Please note, at the time of writing, React 18.2.0 is the latest stable release, and the useOptimistic hook we're about to explore hasn't been officially released. The functionality is experimental, and there may be changes before its final release.

To experiment with the useOptimistic hook, you'll need to install the experimental builds of react and react-dom. You can do this by running:

npm install react@experimental react-dom@experimental

And then import it like this:

import { experimental_useOptimistic as useOptimistic } from 'react';

If you're using TypeScript, remember to include "react/experimental" in your tsconfig.json file to ensure proper type recognition:

{
  "compilerOptions": {
    "types" ["react/experimental"]
  }
}

Understanding Optimistic Updates

Optimistic updates aren't a new concept in web development, but they play a crucial role in enhancing user experience. This technique involves immediately updating the UI with expected changes, assuming that the corresponding server request will succeed. This creates the perception of a faster, more responsive application.

Here's how it typically works:

Imagine you have a list of todo items fetched from a server. When a user adds a new item, it requires a round trip to the server - which takes time. To make the UI feel faster, we can optimistically add the item to the list, making it appear as though the server has already confirmed the action. This is great in a perfect world, but we know network requests aren't always reliable. Handling potential errors and syncing state can become complex, which is where useOptimistic comes in, simplifying this process for React developers.

`useOptimistic` in Action

This example could be used in both an NextJS SSR app and a traditional client-side React application.

Imagine we had a TodoList component that contains a list of todo items and an input with a button to create a new todo item that gets added to the list.

Assume the TodoList component has a todos prop which is provided by data fetched from a server. We implement useOptimistic to optimistically update the UI as follows:

import { experimental_useOptimistic as useOptimistic } from 'react'
import { v4 as uuid } from 'uuid'
import { createTodo } from './actions'

type TodoItem = {
  id: string;
  item: string;
}

export function TodoList({ todos }: { todos: TodoItem[] }) {
  const [optimisticTodos, addOptimisticTodoItem] = useOptimistic<TodoItem[]>(
    todos,
    (state: TodoItem[], newTodoItem: string) => [
      ...state,
      { id: uuid(), item: newTodoItem },
    ]
  )

  return (
    <div>
      {optimisticTodos.map((todo) => (
        <div key={todo.id}>{todo.item}</div>
      ))}
      <form
        action={async (formData: FormData) => {
          const item = formData.get('item')
          addOptimisticTodoItem(item)
          await createTodo(item)
        }}
      >
        <input type="text" name="item" />
        <button type="submit">Add Item</button>
      </form>
    </div>
  )
}

Breaking down the `useOptimistic` hook

Let's look at the hook on its own with placeholder elements:

const [A, B] = useOptimistic<T>(C, D)

A is the optimistic state, it will default to what C is.
B is the dispatching function to call that will run what we define in D.
C is the source of truth, if C is ever changed i.e. we get a new value in from the server, A will be set the that too since it will always treat C as the final source of truth.
D is the mutation that will occur to A when B is called.
T is an optional property for TypeScript users to define the type for the source of truth.

Additional Optimistic Properties

You can further leverage the useOptimistic hook by including additional properties in the mutation.

For example, let's say we want a way to indicate that an update is optimistic to the user. We can do so by adding a pending: true property to the optimistic update and render the todo item a gray color until the update has properly occurred on the server.

We can do that by updating our initial example to this:

export function TodoList({ todos }: { todos: TodoItem[] }) {
  const [optimisticTodos, addOptimisticTodoItem] = useOptimistic<TodoItem[]>(
    todos,
    (state: TodoItem[], newTodoItem: string) => [
      ...state,
      { item: newTodoItem, pending: true },
    ]
  )

  return (
    <div>
      {optimisticTodos.map((todo) => (
        <div
          key={todo.id}
          style={{ color: todo.pending ? "gray" : "inherit" }}
        >
          {todo.item}
        </div>
      ))}
      <form
        action={async (formData: FormData) => {
          const item = formData.get('item')
          addOptimisticTodoItem(item)
          await createTodo(item)
        }}
      >
        <input type="text" name="item" />
        <button type="submit">Add Item</button>
      </form>
    </div>
  )
}

Now when we submit a new todo item, optimistically our UI will update to the initial todo list plus one new todo item with the pending property as true. In our render method the pending todo item will be styled to have a gray color. Once the server update has occurred, the todos prop - which is the source of truth - would have changed which will cause the optimisticTodos value to update to the new source of truth. This new source of truth will include the optimistically updated value without the pending property, so the new item will no longer have a gray color.

Conclusion

While still experimental, the useOptimistic hook offers an exciting glimpse into the future of state management in React applications. It aims to simplify the implementation of optimistic UI updates, contributing to faster, more responsive user experiences. This feature seems particularly promising when combined with NextJS's SSR capabilities, though it remains experimental at this stage.

As the React community anticipates the official release of this feature, I'm interested to hear your thoughts. Have you tried the useOptimistic hook in your projects? What potential do you see for this feature in real-world applications? Share your experiences and insights in the comments below!

The Curse of Expertise: Knowledge is NOT Always Power

Barry Michael Doyle — Wed, 27 Sep 2023 07:55:00 +0000

You've probably heard the saying, "knowledge is power." But have you ever encountered the paradoxical Curse of Knowledge?

The curse of knowledge is a cognitive bias that occurs when an individual, who is communicating with others, fails to disregard information that is only available to themselves, assuming they all share a background and understanding.

While many discussions focus on how this cognitive bias affects interpersonal communications, I'd like to explore a different angle: how the Curse of Knowledge can foster self-doubt and subsequently stagnation. From my experience, this often manifests in two domains:

Career Progression
Technical Writing

Let's dissect these scenarios, especially from the perspective of a software engineer.

Career Progression

How often have you hesitated to chase an opportunity simply because you questioned your own capability? Picture this: You're a junior developer, and a mid-senior level opening arises in a domain you're well-acquainted with. But you bail, thinking you lack the required years of experience or aren't versed in a minor part of the tech stack.

Consider this: if you've taken my advice from If I Could Start My Dev Career Again, you've chosen a niche within the technology landscape. Consequently, your expertise likely surpasses many peers who aim to be jacks-of-all-trades. So, why let the Curse of Knowledge hold you back from roles where you might not tick every box?

Raises are another tricky domain. At a company I once worked for, a colleague joined a month after me as a junior developer. Three years on, while I had transitioned from a senior engineer to a tech lead, securing a 50% raise in my third year, he still wore the "junior" tag. This wasn't a company issue—it was a Curse of Knowledge issue. Starting as a junior, with dedication, one can swiftly acquire mid-level competencies within six months. The real challenge? Recognizing and valuing our own growth, which the Curse often obscures.

Technical Writing

Technical writing can be a game-changer for developers. I wrote this article primarily to nudge my fellow developers into giving it a shot.

You might’ve heard, or even said it yourself, “I’ve got nothing to write about.” Think about it though. Didn’t you solve a tech puzzle recently? Maybe this week? Or the last? Not every piece needs to be a deep-dive guide. Writing is a skill, and as you flex that muscle, you'll find your rhythm. Ideas will come. For example, just last night, my mind buzzed with article ideas. Compare that to three weeks ago when I felt creatively parched. The key? Just begin.

Here's where the Curse of Knowledge sneaks in again. You might assume everyone knows what you do. "Why write about it?", you may think. But once you start sharing those ‘obvious’ insights, you'll find many thanking you for illuminating what was hidden to them. Remember, what’s routine for you can be revelation for someone else.

Conclusion

Over the past decade, I've had the privilege of mentoring numerous budding software developers. Their growth, in just a brief time, astounds me.

A recent chat with a friend highlighted this. Comparing our technical discussions from half a year ago, the shift is staggering. What once were basic inquiries have transformed into insightful exchanges that even leave me enriched.

It's worth pausing and reflecting:

Am I being tripped up by the Curse of Knowledge?

Have you felt this way? I'd be eager to hear if you've encountered this tricky cognitive bias. Share your experiences with me!

To `useMemo` or Not to `useMemo`: A React Developer’s Dilemma

Barry Michael Doyle — Wed, 20 Sep 2023 08:25:42 +0000

Hey React devs! Today, we’re diving into the useMemo hook - a tool that can speed up our apps but can also complicate things if not used wisely.

So, what’s the deal with useMemo? Well, it's a hook that helps us optimize function executions by “remembering” the previous results, and only redoing the work if the inputs change. It’s like having a super-smart assistant that remembers everything, ensuring our app runs faster and smoother. Handy, right?

But here’s a little story. A while back, someone on my team got really into useMemo and started using it everywhere. I mean, everywhere! And while it’s fabulous, it’s not supposed to be a one-size-fits-all solution; otherwise, we’d have a useWithoutMemo hook built into React!

To save you from the useMemo everywhere trap, I've compiled this guide where we explore the best spots and not-so-great spots to use useMemo. Let's jump in!

When to Use `useMemo`

useMemo shines in these scenarios:

1. Complex Calculations

When your component deals with heavy computations, useMemo ensures these only re-run when necessary, keeping the performance sleek.

function complexCalculation(list) {
  // Complex calculation here
  return result;
}

function MyComponent({ list }) {
  const memoizedResult = useMemo(() => {
    return complexCalculation(list)
  }, [list]);

  return <div>{memoizedResult}</div>;
};

2. Maintaining Referential Equality

useMemo helps in keeping the same reference for objects or arrays when passing them as props, avoiding needless renders.

function MyComponent({ values }) {
  const memoizedValues = useMemo(() => values, [values]);

  return <MemoizedChildComponent values={memoizedValues} />;
};

function ChildComponent({ values }) {
  // ...
});

const MemoizedChildComponent = React.memo(ChildComponent)

3. Filtering or Sorting Large Lists

When working with large datasets, using useMemo for filtering or sorting prevents these operations from rerunning during every render, saving precious computing power.

function MyComponent({ list }) {
  const filteredList = useMemo(() => {
    return list.filter(item => item.active);
  }, [list]);

  return <ListDisplay items={filteredList} />;
};

When Not to Use `useMemo`

useMemo is not always the hero we deserve. Here’s when it can be counterproductive:

1. Simple Calculations

For basic calculations, bringing in useMemo can complicate things more than helping.

function MyComponent({ value }) {
  // Not recommended for simple calculations
  const multipliedValue = useMemo(() => {
    return value * 2;
  }, [value]);

  return <div>{multipliedValue}</div>;
};

2. Working with Primitive Values

Memoizing primitive values, like numbers or strings, is generally overkill as they don't cause unnecessary renders.

function MyComponent({ value }) {
  // Not recommended for primitive values
  const memoizedValue = useMemo(() => value + 1, [value]);

  return <div>{memoizedValue}</div>;
};

### 3. Frequent Changes in Dependencies

If the inputs change a lot, `useMemo` loses its efficiency because it ends up recalculating often.

function MyComponent({ frequentlyChangingValue }) {
  // Not recommended for frequently changing dependencies
  const memoizedValue = useMemo(() => {
    return expensiveCalculation(frequentlyChangingValue);
  }, [frequentlyChangingValue]);

  return <div>{memoizedValue}</div>;
};

Conclusion

Remember, it’s not about using useMemo everywhere, but about using it wisely. Start with the simple approach first, and then optimize as needed, avoiding premature optimization.

I hope this guide sets you on the path to creating more efficient React apps. Happy coding!

React Native Tutorial: How to Implement a Celebration Confetti Burst

Barry Michael Doyle — Tue, 19 Sep 2023 12:56:13 +0000

Recently, I embarked on a mission to add a splash of joy — a confetti burst — to celebrate the special moments users experience in my React Native app, such as when they complete a challenging Sudoku puzzle. Available on iOS and Android.

This GIF doesn't do it justice; it looks significantly better on native devices! 😉

The Journey

Despite my excitement, finding the perfect library for the confetti burst proved a bit of a challenge as many libraries were outdated or didn't deliver the smooth result I envisioned. However, fortune smiled on me when I stumbled upon a golden suggestion on Reddit.

The Solution: Lottie

A simple yet game-changing comment on Reddit introduced me to Lottie:

"Why not use Lottie?"

Further research led me to LottieFiles (not sponsored) — a haven for animation enthusiasts offering a myriad of free animations, including a variety of confetti animations ready to be used. To integrate these animations in a React Native app, the lottie-react-native library comes in handy.

Tutorial: Using Lottie with React Native

With LottieFiles and the lottie-react-native library at our disposal, it's time to implement a joyous confetti burst in a React Native app. Let's delve into the step-by-step guide:

Step 1: Set up the React Native App

Create a new empty React Native app. In your App.tsx file (I love TypeScript), add a button that will later trigger the confetti animation.

import { StyleSheet, Button, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title='Trigger' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Step 2: Select and Download a Confetti Animation

Head to LottieFiles and select a confetti animation that catches your eye. I chose this vibrant one.

Download the Lottie JSON file.

Step 3: Integrate the Animation into Your Project

Rename the downloaded file to confetti.json and move it to the assets folder in your project.

Step 4: Install the Lottie Library

Install the lottie-react-native library using the following command:

npm install lottie-react-native

Step 5: Implement the LottieView Component

In this crucial step, we'll add the LottieView component to our app and set up an event handler to initiate the animation when the button is pressed. Let's break down the code to understand each part:

Importing and Setting Up LottieView

We start by importing the LottieView component from the lottie-react-native library, which is used to render the Lottie animations in your React Native app.

import LottieView from 'lottie-react-native';

Using useRef Hook

Next, we utilize the useRef hook to create a mutable object, which holds the .current property initialized with the LottieView component. This .current property will allow us to access the LottieView methods, like .play(), later in our triggerConfetti function.

const confettiRef = useRef<LottieView>(null);

Creating the triggerConfetti Function

We create a function called triggerConfetti to play the Lottie animation from its start when it's called, giving us the control to initiate the animation with a button press.

function triggerConfetti() {
  confettiRef.current?.play(0);
}

Styling and Setting Up the LottieView Component

Lastly, we style and set up our LottieView component, explaining each property as follows:

source: specifies the animation's JSON file path.
autoPlay: we set this to false to prevent the animation from playing automatically when the component mounts, giving us control over when it plays.
loop: set to false to ensure the animation plays once and does not loop indefinitely.
resizeMode: this is set to 'cover' to ensure the animation covers the entire view, creating a full-screen confetti burst.
style: here, we use absolute positioning to cover the full screen, setting a high zIndex to overlay it over other elements and pointerEvents to 'none' to allow user interaction with other elements since the LottieView element overlays the entire screen.

<LottieView
  ref={confettiRef}
  source={require('./assets/confetti.json')}
  autoPlay={false}
  loop={false}
  style={styles.lottie}
  resizeMode='cover'
/>

const styles = StyleSheet.create({
  ...
  lottie: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    pointerEvents: 'none',
  },
});

Final Code

import LottieView from 'lottie-react-native';
import { useRef } from 'react';
import { StyleSheet, Button, View } from 'react-native';

export default function App() {
  const confettiRef = useRef<LottieView>(null);

  function triggerConfetti() {
    confettiRef.current?.play(0);
  }

  return (
    <>
      <View style={styles.container}>
        <Button title='Trigger' onPress={triggerConfetti} />
      </View>
      <LottieView
        ref={confettiRef}
        source={require('./assets/confetti.json')}
        autoPlay={false}
        loop={false}
        style={styles.lottie}
        resizeMode='cover'
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lottie: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    pointerEvents: 'none',
  },
});

And with this setup, a press on the 'Trigger' button will initiate a joyous burst of confetti, enhancing your app with a festive touch to celebrate special moments.

Conclusion

Congratulations, you've successfully added a confetti celebration to your React Native app! I encourage you to explore different animations available on LottieFiles and to experiment with other interactive elements using what you've learned in this tutorial.

Feel free to share any questions or feedback in the comments below, and I'll be glad to assist you. Happy coding!

How To Main Separation of Concerns in React

Barry Michael Doyle — Sun, 17 Sep 2023 18:42:30 +0000

In this post, I'd like to share a design pattern that has been a game-changer for me and the teams I've worked ever since the introduction of React hooks.

In the software development world, we often hear about the Single Responsibility Principle (SRP). It's a simple yet powerful idea:

"A class should focus on doing one thing only."

But when we dive into building React components, sticking to this principle isn't always straightforward. Luckily, the approach I'm about to share has helped me apply the SRP effectively in my React projects, and I believe it can do the same for you.

Before Implementing Separation of Concerns

Let's start by examining a straightforward form component:

// MyCustomForm.jsx

function MyCustomForm({ initialValues }) {
  const [firstName, setFirstName] = useState(initialValues.firstName);
  const [lastName, setLastName] = useState(initialValues.lastName);

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  function handleSubmit() {
    console.log("Submitting Values", firstName, lastName);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={handleFirstNameChange}
        placeholder="First name"
        value={firstName}
      />
      <input
        onChange={handleLastNameChange}
        placeholder="Last name"
        value={lastName}
      />
      <button type="submit">
        Submit
      </button>
    </form>
  )
}

For those familiar with React, this is a basic form component with two input fields and a submit button, all wrapped up with the necessary state and event handlers. While this script isn't flawed, it does have room for enhancement, which we will explore in the following section.

Implementing Separation of Concerns

To take this component to the next level, we're going to decouple the logic from the presentation elements.

First, we craft a custom hook exclusively for the MyCustomForm component:

// useMyCustomForm.js

function useMyCustomForm({ initialValues }) {
  const [firstName, setFirstName] = useState(initialValues.firstName);
  const [lastName, setLastName] = useState(initialValues.lastName);

  function handleFirstNameChange(e) {
    setFirstName(e.target.value);
  }

  function handleLastNameChange(e) {
    setLastName(e.target.value);
  }

  function handleSubmit() {
    console.log("Submitting Values", firstName, lastName);
  }

  return {
    firstName,
    lastName,
    handleFirstNameChange,
    handleLastNameChange,
    handleSubmit,
  }
}

With the hook ready, we reintroduce it into the MyCustomForm component, maintaining the JSX structure while relocating the logic to our new custom hook:

// MyCustomForm.jsx

function MyCustomForm({ initialValues }) {
  const {
    firstName,
    lastName,
    handleFirstNameChange,
    handleLastNameChange,
    handleSubmit,
  } = useMyCustomForm({ initialValues });

  return (
    <form onSubmit={handleSubmit}>
      <input
        onChange={handleFirstNameChange}
        placeholder="First name"
        value={firstName}
      />
      <input
        onChange={handleLastNameChange}
        placeholder="Last name"
        value={lastName}
      />
      <button type="submit">
        Submit
      </button>
    </form>
  )
}

This modification fosters a cleaner separation of concerns, with both files working in tandem yet distinctly holding their own roles. You'll notice the JSX remains untouched; we simply transitioned the logic into its dedicated file.

Benefits

Discover why this approach has become my go-to in various projects:

Easy Maintainability and Readability

From the moment you open the new MyCustomForm.jsx file, the presentational aspect of the component greets you, streamlining comprehension. Imagine wanting to add labels; there’s no need to sift through the component logic to find the JSX — it's readily accessible. Plus, initiating code upon component mounting is as simple as inserting a useEffect in the useMyCustomForm hook.

Simplified Testing

Adopting this strategy simplifies the testing process for both the logic and presentation layers of the component. It allows for straightforward testing of the useMyCustomForm hook in isolation. Moreover, mocking the values for the useMyCustomForm hook in your MyCustomForm tests becomes a breeze. And for holistic integration tests, focus on writing tests for MyCustomForm without altering the useMyCustomForm values.

Conclusion

While many associate custom hooks with logic reusable across multiple components, they can also shine in singular, specific applications, as showcased here.

What are your thoughts on this component development strategy? Do you see its utility, or deem it not worth the investment? Share your perspective!

From Redux to React Context and Beyond: A Dive into State Management with Zustand

Barry Michael Doyle — Fri, 15 Sep 2023 09:19:50 +0000

Remember when Redux was everyone's favorite tool for handling state in React apps, helping us avoid the dreaded prop-drilling?

This tool came to life in 2015, thanks to Dan Abramov and Andrew Clark. Abramov was gearing up for a talk at React Europe when he started working on a Flux proof of concept that could handle state changes dynamically, allowing for forward and backward time travel through state alterations. This endeavor led to the birth of Redux.

Fast forward to 2016, Abramov shared a piece of advice that would resonate with many developers:

"I would like to amend this: don't use Redux until you have problems with vanilla React."

Within that same year, he joined the React core team and introduced the world to the React Context API. This release marked a shift in the developer community, with many trading their boilerplate-heavy Redux setups for sleek React Context solutions.

I have fond memories of using Redux Devtools in my larger projects. Yet, I can't deny the breath of fresh air that came with bypassing Redux's extensive setup in my newer ventures. Join me as we take a closer look at React Context, examining its pros and cons, and exploring a route to even smoother state management, leaving Redux out of the equation.

Understanding React Context

Before we delve deeper, let's take a moment to appreciate the inception of React Context. It emerged as a solution to simplify state management and mitigate the issues of prop-drilling that were prevalent in large applications.

React Context shines in reducing prop-drilling, a situation where props are passed down through many layers of components. Let's illustrate this with a more detailed example.

Without React Context

function App() {
  const [user, setUser] = useState({ name: "John Doe" });

  return <Header user={user} />;
}

function Header({ user }) {
  return <Navbar user={user} />;
}

function Navbar({ user }) {
  return <UserProfile user={user} />;
}

function UserProfile({ user }) {
  return <div>User name: {user.name}</div>;
}

In this scenario, the user prop is being passed down through several layers, from App to UserProfile, even though the intermediate components (Header and Navbar) do not use the user prop.

With React Context

const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState({ name: "John Doe" });

  return (
    <UserContext.Provider value={user}>
      <Header />
    </UserContext.Provider>
  );
}

function Header() {
  return <Navbar />;
}

function Navbar() {
  return <UserProfile />;
}

function UserProfile() {
  const user = useContext(UserContext);

  return <div>User name: {user.name}</div>;
}

Here, we create a UserContext and use it to provide the user value directly to the UserProfile component, bypassing the need to pass it through the Header and Navbar components. This approach maintains a cleaner, more manageable codebase, effectively reducing prop-drilling.

React Context Shortcomings

While React Context has brought a considerable amount of ease in state management, it comes with its own set of challenges. Let's delve into some of the notable drawbacks along with code examples to illustrate them.

Re-rendering Inefficiencies

One of the significant issues with React Context is that it causes unnecessary re-renders. Whenever the context value changes, all components consuming the context are re-rendered, even if they only use a part of the context value, leading to performance bottlenecks.

const UserContext = React.createContext();

function App() {
  const [user, setUser] = useState({ name: "John", age: 30 });

  return (
    <UserContext.Provider value={user}>
      <UserProfile />
      <UserAge />
    </UserContext.Provider>
  );
}

function UserProfile() {
  const user = useContext(UserContext);
  console.log("UserProfile rendered");
  return <div>User name: {user.name}</div>;
}

function UserAge() {
  const user = useContext(UserContext);
  console.log("UserAge rendered");
  return <div>User age: {user.age}</div>;
}

In this example, changing either the name or age property of the user state would cause both UserProfile and UserAge components to re-render, even if only one of the properties is used in each component.

This isn't really a big deal in 99% of use cases. The Redux fanboys will boldly proclaim that Redux has a built in solution to this with their useSelector hook.

Wrapper Hell with Multiple Context Providers

As applications grow in complexity, it's common to find ourselves needing multiple contexts to manage different aspects of the application state. This can lead to a "wrapper hell," where our main App component is wrapped in several layers of context providers, leading to a cluttered and less maintainable codebase.

const UserContext = React.createContext();
const ThemeContext = React.createContext();
const LanguageContext = React.createContext();

function App() {
  const [user, setUser] = useState({ name: "John Doe" });
  const [theme, setTheme] = useState("light");
  const [language, setLanguage] = useState("en");

  return (
    <UserContext.Provider value={user}>
      <ThemeContext.Provider value={theme}>
        <LanguageContext.Provider value={language}>
          <Dashboard />
        </LanguageContext.Provider>
      </ThemeContext.Provider>
    </UserContext.Provider>
  );
}

function Dashboard() {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  const language = useContext(LanguageContext);

  return (
    <div style={{ background: theme === "light" ? "#fff" : "#333", color: theme === "light" ? "#000" : "#fff" }}>
      <h1>{language === "en" ? "Hello" : "Hola"}, {user.name}</h1>
    </div>
  );
}

In this example, the Dashboard component needs to access multiple contexts, resulting in a deeply nested structure of providers in the App component. This not only makes the code harder to read but also increases the complexity of managing state as the number of contexts grows.

The Redux fanboys also love to bring this one up and I can admit Redux handles this much better by only having one provider to rule them all.

Boilerplate Code

Although React Context does not have nearly as much boilerplate as Redux does. It can still be annoying to have to set up a provider to wrap around your code whenever you want to use React Context.

Yeah, the Redux fanboys can shut up for this part.

The Solution: Zustand

Zustand is a small, fast, and scaleable "bearbones" state-management solution. It is not strictly tied to React, which means it can be used with other frameworks as well. It offers a simple and intuitive API, facilitating easy integration into your projects.

Here's are some of the benefits on why Zustand stands out:

Simplified State Management

Zustand does away with the need for reducers, actions, and context providers, offering a straightforward way to manage state. It allows for a clean and minimal setup, helping you avoid the "wrapper hell" we often encounter with multiple context providers.

Avoids Unnecessary Re-renders

Zustand ensures that components only re-render when the state they are subscribed to changes, avoiding the unnecessary re-renders that are common with React Context. This is similar to the way Redux handles this problem with its useSelector hook.

Easy to Set Up and Use

Setting up Zustand is a breeze. With just a few lines of code, you can have your state management up and running, without the boilerplate code that comes with other solutions.

Implementing Zustand: A Practical Example

Let's look at how we can implement Zustand in a React project, using a simple counter example:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increase: () => set((state) => ({ count: state.count + 1 })),
  decrease: () => set((state) => ({ count: state.count - 1 })),
}));

function Counter() {
  const { count, increase, decrease } = useStore();
  return (
    <div>
      <button onClick={decrease}>-</button>
      <span>{count}</span>
      <button onClick={increase}>+</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

In this example, we define a useStore hook using Zustand's create function, where we define our state and actions. In the Counter component, we then use this hook to access and update the state, demonstrating a simple yet powerful state management solution with Zustand.

Leveraging Middleware in Zustand

A significant advantage of using Zustand is its compatibility with various middlewares that enhance its functionality, providing a rich and flexible development experience. Here, we briefly touch upon some of the notable middlewares you can leverage:

Persist Middleware: Allows for the persistence of your store's state, saving it in a storage solution of your choice and rehydrating it when the page reloads. It's a great tool for maintaining state persistence across sessions.
Immer Middleware: Facilitates working with immutable state, letting you write mutable logic safely. It integrates seamlessly with Zustand, providing a straightforward way to manage complex state logic while maintaining immutability.
Redux Middleware: If you are coming from a Redux background, you'll appreciate this middleware. It enables you to use Redux-like reducers and actions in your Zustand store, providing a familiar development experience.
Devtools Middleware: This middleware integrates Zustand with Redux DevTools, allowing you to inspect your state and actions, offering a powerful debugging tool that many developers are already familiar with.

These middleware options enhance Zustand's functionality, offering a flexible and powerful solution for state management in React applications. They can be great allies in building robust and maintainable applications, providing tools to handle a variety of complex state management scenarios efficiently.

Conclusion

If you haven't used Zustand before, then I hope I've convinced you to give it a try to enhance your developer experience, and if you have used it, let me know your thoughts on it.

Please share your experiences and thoughts in the replies below for some healthy, constructive discussion.

Icebreaker question:

What do you currently use for state management in your React apps?

If I Could Start My Dev Career Again: Tips for Newbies

Barry Michael Doyle — Mon, 11 Sep 2023 17:09:27 +0000

I began my programming journey back in 2010, a time when I was grappling with the basics and marveling at what a few lines of code could achieve. It's been a wild ride getting to where I am today. But if I were to start again from scratch, what would I do differently?

I'm going to discuss some valuable lessons I've learned over the last decade that might help you get started in a career in software development.

Do not try to learn every language

I hear this a lot with people getting started with learning to code. They'll go to a site like freeCodeCamp or Codecademy and see all the different options that they offer and then they'll say something like this:

"I've just started learning C++, then I'm going to go learn Java, then HTML, then Python, then PHP."

Do not do this!

Learning the foundations of multiple different programming languages is just going to confuse you. It would be better to pick one language/framework to focus on initially. Mastering one language will not only give you a deeper understanding but will also make learning other languages easier in the future.

Pick a speciality early

Software development is a very broad field, and it is easy to get overwhelmed thinking that you need to know absolutely everything.

Identify what area of software development you'd like to get into early on. Consider fields like web development, mobile app development, or data science. This focus will aid you in landing your first job as companies generally look for people with a specific skill set.

Create accounts for the platforms you use

Nowadays, it is not enough to just be someone who knows how to code to get your first programming gig. It is worth having some sort of online presence rather than being just another lurker.

Engage on platforms you use regularly and make meaningful contributions. Remember, maintaining a respectful and healthy engagement fosters a positive online environment.

Here are some platforms that I believe you should be active on, I personally have been approached for jobs by people who found me on these platforms:

LinkedIn is a treasure trove for professionals. Create an account here to connect with other developers and stay abreast of new trends. Keep your profile updated, showcasing your achievements and skills effectively. You can follow me here if you want.

X (formerly Twitter)

Though not very active on X/Twitter, I find it beneficial to follow companies and developers in spaces that interest me. Engaging with industry leaders can provide you with valuable insights and learning opportunities. If you feel like following me for my infrequent posts there you can follow me here.

StackOverflow

Despite being a tough platform to get into, StackOverflow offers a wealth of knowledge. Learn from the feedback you receive and don't be disheartened by initial setbacks.

GitHub

If you haven't already, start using GitHub to store your source code for learning projects. It's also a great platform to showcase your personal projects, highlighting your learning trajectory and growth.

Over time you'll get this nifty looking graph that shows that you know things!

Committing to your own projects isn't the only way to engage on GitHub. You can also create issues and comment on existing issues on other libraries that you've worked with in your personal projects.

Build something early

As you delve deeper into your chosen specialty, start building things on the side to put your learning into practice. Try to create something unique, not just replicating tutorial projects, to foster creativity and problem-solving skills.

Write about what you're learning and doing

Writing about your learning journey, like I am doing here, can be a great way to network with others who share similar interests. It not only helps in understanding a topic better but also opens avenues for collaboration and learning.

The best thing you can do is just get started right away. You can use platforms like dev.to, Medium etc. or you can self-host. It doesn't really matter where you choose to host it, as long as you start writing.

Once you've written your first post you can share it on X/Twitter and LinkedIn!

Network Network Network

Networking has been a golden key in my journey. Be it online communities, or developer friends in your circle, make sure to engage actively and maintain a professional demeanor while networking.

Apply for jobs regularly

Don't hesitate to apply for jobs even if you feel you're not 100% ready. Interviews can be a great learning experience, helping you understand what companies look for in a developer.

Be proactive in your job search. Tailor your resume to match job descriptions and don't shy away from reaching out to companies you find interesting, showcasing your eagerness and initiative.

Degree vs No Degree

In today's world, a Computer Science degree is not a mandate. There are many online platforms offering courses that are more updated, practical, and most importantly, affordable compared to traditional degree courses. Utilize them to build a strong foundation in your chosen field.

Conclusion

I hope you've found these tips useful! If you think I've missed any useful tips please share them with others and continue the discussion in the comments!

I intend to go more in depth with some of these topics in future posts.

Forem: Barry Michael Doyle

Why I Built Patch Pulse

Starting with Slack

Expanding into a CLI

It is now a small ecosystem

What I want to build next

If this is useful to you

Stop Using ChatGPT To Write Your Blog Posts For You! It's Not Working...

Disclaimer

The State Of AI

I Am A Hypocrite

ChatGPT Is A Tool, Not A Crutch

The Problem With Using ChatGPT To Write For You

Horror Story Examples

Conclusion

How to Build a Custom React Hook to Listen for Keyboard Events

Under the Hook - Excuse the Pun

A More General Use Case Hook

Conclusion

Patch Pulse: Devlog #1 - Get notified when new packages are released

What Exactly Is Patch Pulse?

Envisioning Patch Pulse:

The Near Future for Patch Pulse:

Closing Comments

Exploring the New useOptimistic Hook in React: Enhancing UI with Optimistic Updates

Experimental Disclaimer

Understanding Optimistic Updates

useOptimistic in Action

Breaking down the useOptimistic hook

Additional Optimistic Properties

Conclusion

The Curse of Expertise: Knowledge is NOT Always Power

Career Progression

Technical Writing

Conclusion

To `useMemo` or Not to `useMemo`: A React Developer’s Dilemma

When to Use useMemo

1. Complex Calculations

2. Maintaining Referential Equality

3. Filtering or Sorting Large Lists

When Not to Use useMemo

1. Simple Calculations

2. Working with Primitive Values

Conclusion

React Native Tutorial: How to Implement a Celebration Confetti Burst

The Journey

The Solution: Lottie

Tutorial: Using Lottie with React Native

Step 1: Set up the React Native App

Step 2: Select and Download a Confetti Animation

Step 3: Integrate the Animation into Your Project

Step 4: Install the Lottie Library

Step 5: Implement the LottieView Component

Conclusion

How To Main Separation of Concerns in React

Before Implementing Separation of Concerns

Implementing Separation of Concerns

Benefits

Easy Maintainability and Readability

Simplified Testing

Conclusion

From Redux to React Context and Beyond: A Dive into State Management with Zustand

Understanding React Context

Without React Context

With React Context

React Context Shortcomings

Re-rendering Inefficiencies

Wrapper Hell with Multiple Context Providers

Boilerplate Code

The Solution: Zustand

Simplified State Management

Avoids Unnecessary Re-renders

Easy to Set Up and Use

Implementing Zustand: A Practical Example

Leveraging Middleware in Zustand

Conclusion

Icebreaker question:

If I Could Start My Dev Career Again: Tips for Newbies

Do not try to learn every language

Pick a speciality early

`useOptimistic` in Action

Breaking down the `useOptimistic` hook

When to Use `useMemo`

When Not to Use `useMemo`