DEV Community: Lutif Ali

Solving Unnecessary Rerenders in React with eventsync -

Lutif Ali — Mon, 07 Jul 2025 05:56:22 +0000

If you’ve ever used React Context for global state management, you probably ran into this: updating one small value causes your entire app to rerender. Annoying, right? Especially when only one component needed the update.

Let’s break down why this happens and how eventsync fixes it using a simple, event-driven approach.

The Problem: Context Rerenders Everything

React Context is great for sharing global state, but it comes with a hidden cost. Imagine this setup:

context.tsx

import React, { createContext, useContext, useState } from 'react';

const AppContext = createContext(null);

export const AppProvider = ({ children }) => {
  const [counter, setCounter] = useState(0);
  const [user, setUser] = useState({ name: '', email: '' });

  return (
    <AppContext.Provider value={{ counter, setCounter, user, setUser }}>
      {children}
    </AppContext.Provider>
  );
};

export const useAppContext = () => useContext(AppContext);

Now, two components that use different parts of the state:

Counter.tsx

import { useAppContext } from './context';

const Counter = () => {
  const { counter, setCounter } = useAppContext();
  console.info('Counter rerendered');

  return (
    <button onClick={() => setCounter(counter + 1)}>{counter}</button>
  );
};

UserName.tsx

import { useAppContext } from './context';

const UserName = () => {
  const { user } = useAppContext();
  console.info('UserName rerendered');

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

If you click the Counter button, both Counter and UserName rerender. But why?

React Context triggers a rerender for all consumers whenever the context value changes, even if the part they care about stayed the same.

This means:

✅ More rerenders than necessary
✅ Performance bottlenecks in large apps
✅ Frustrating debugging sessions

The Solution: eventsync

eventsync gives you global state without the Context rerender headaches. It uses good old DOM events to notify only the components that care.

Here’s the same example rewritten with eventsync:

App.tsx

import { initGlobalState } from 'eventsync';
import Counter from './Counter';
import UserName from './UserName';

initGlobalState({
  counter: 0,
  user: { name: '', email: '' }
});

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

Counter.tsx

import { useGlobalState } from 'eventsync';

const Counter = () => {
  const [{ counter }, { setCounter }] = useGlobalState(["counter"]);
  console.info('Counter rerendered');

  return (
    <button onClick={() => setCounter(counter + 1)}>{counter}</button>
  );
};

UserName.tsx

import { useGlobalState } from 'eventsync';

const UserName = () => {
  const [username] = useGlobalState('user.name');
  console.info('UserName rerendered');

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

With eventsync:

✅ Updating counter only rerenders Counter
✅ UserName stays untouched
✅ No need to split context or build complex selectors

Why Use eventsync?

Fine-grained updates: Components subscribe to specific state fields

Cleaner code: No boilerplate splitting context for different consumers

Better performance: Fewer unnecessary renders

Zero context dependency: eventsync uses native DOM events under the hood

Final Thoughts

Tired of your whole UI rerendering when only one value changes? Give react-eventsync a try.

You get global state with precise, efficient updates, powered by DOM events. It’s a simple drop-in tool that keeps your app performant without extra complexity.

Curious to explore more? Check out the Getting Started guide and level up your global state management.

The project is open-source and available on GitHub:
🌟 https://github.com/Lutif/eventSync

If you find it useful, please give it a star
Want to follow my work? Follow on github to support my work. lutif

Say Goodbye to Paid Sentry Alerts: Get Error Notifications on Slack for Free!

Lutif Ali — Sat, 28 Sep 2024 08:36:24 +0000

Are you tired of paying for Sentry's Slack integration? What if I told you there's a way to send error notifications to Slack for free? That's right—no more paying for what you can do with a few simple tricks. By leveraging Sentry's webhook, Vercel's edge functions, and Slack’s free API, you can set up a system that gets real-time error alerts sent straight to Slack without shelling out a dime. Intrigued? Let me show you how.

Why Pay for Something You Can Do for Free?

Sentry offers a built-in integration with Slack, but it’s locked behind a paywall. For smaller projects or indie developers, that’s just not worth it. Luckily, we can bypass this by creating a webhook listener on Vercel that formats error notifications and sends them to Slack via the free Slack API.

Ready to ditch the paid plans? Let’s dive in.

Step 1: Configuring the Sentry Webhook (No, It’s Not Hard)

Sentry provides a webhook legacy integration that lets you send error events to external services. Here’s how you hook that up to a free Vercel edge function:

Open Your Sentry Project: Head to your project settings in Sentry.
Enable Webhooks: Under Legacy Integrations, add a new webhook. This is where Sentry will send error data.
Point It to Vercel: Once we set up our Vercel function, you’ll use that URL here. But first, let’s get the listener set up.

Step 2: Vercel Edge Function—The Magic Sauce

If you’re new to Vercel, it’s a serverless platform that allows you to run code at the "edge" for free (within certain limits). We’re going to deploy an edge function that will listen for Sentry events, format them, and send them to Slack. Here’s the code that does it all:

export const config = {
  runtime: 'edge',
};

const sendMessage = async (channel, { level, formatted, environment, email, title, culprit, project }) => {
  console.info({ channel, level, formatted, environment, email, title, culprit, project });
  const isError = level === "error";
  const blocks = [
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": `${isError ? ":red_circle:" : ""} *${title}*`,
      },
    },
    {
      "type": "section",
      "fields": [
        {
          "type": "mrkdwn",
          "text": `*Environment:*\n${environment}`,
        },
        {
          "type": "mrkdwn",
          "text": `*Level:*\n${level}`,
        },
        {
          "type": "mrkdwn",
          "text": `*Project:*\n${project}`,
        },
      ],
    },
    {
      "type": "section",
      "fields": [
        {
          "type": "mrkdwn",
          "text": `*User:*\n${email}`,
        },
      ],
    },
    {
      "type": "divider",
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": `*Message:*\n${formatted}`,
      },
    },
    {
      "type": "section",
      "text": {
        "type": "mrkdwn",
        "text": `*Message:*\n${culprit}`,
      },
    },
    {
      "type": "divider",
    },
  ];

  try {
    const response = await fetch('https://slack.com/api/chat.postMessage', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        'Authorization': `Bearer ${process.env.SLACK_ACCESS_TOKEN}`,
      },
      body: JSON.stringify({
        channel,
        blocks,
      }),
    });

    return response.data;
  } catch (e) {
    console.error(e);
  }
};

export default async (req) => {
  const body = await req.json();
  const { project, culprit, event: { level, logentry: { formatted }, user: { email }, environment, metadata: { title } } } = body;

  await sendMessage(process.env.CHANNEL_ID, { level, formatted, environment, email, title, culprit, project });

  return new Response(`Hello from Edge.js! ${body}`);
};

What This Code Does:

Receives Sentry Events: The function is triggered when Sentry sends an event (like an error).
Formats the Message: It parses the event and formats a Slack message using blocks (the fancy Slack message formatting system).
Sends It to Slack: Using Slack’s API, it posts the error message to a channel of your choice.

Step 3: Slack Setup—Let the Notifications Begin

Here’s how you make sure Slack gets the error alerts:

Create a Slack App: Visit api.slack.com/apps and create a new app in your workspace.
Permissions: Under OAuth & Permissions, add the chat:write permission.
Install the App: Grab the OAuth token after installing the app to your workspace.
Environment Variables: Set SLACK_ACCESS_TOKEN and CHANNEL_ID as environment variables in Vercel.

Step 4: Deploy the Function to Vercel

Push the code to a GitHub repository, connect it to Vercel, and deploy. You’ll need to add your Slack token and channel ID as environment variables. Vercel will handle the rest.

Now, when an error happens in Sentry, it will trigger your edge function, and you’ll see those notifications in Slack within seconds!

Step 5: Testing the Integration

To test if everything’s working, trigger an error in your Sentry project. Check your Slack channel for the notification! If it worked, you should see a neatly formatted message with all the error details.

Why This is Awesome

It’s Free: No more paying for Sentry’s Slack integration.
Real-Time Alerts: Get instant error notifications as soon as they happen.
Customizable: You control how the Slack messages look and what data they contain.
No Maintenance: Vercel’s serverless functions handle everything with almost no setup costs.

Bonus: Get the Code & Show Some Love ❤️

You can grab this ready-made solution on my GitHub! Feel free to customize it, use it in your projects, or even improve upon it. If you find it helpful, consider giving the repo a star ⭐ and follow me on github to support my work.

Check out the GitHub Repository Here

Got Feedback? Drop a comment or share your thoughts. And if this tutorial saved you some money or gave you a new tool in your dev arsenal, give it a share. Let’s make development easier for everyone!